vue3在setup如何访问html元素

setup是在props解析之后，beforeCreate之前进行调用，这时还没有渲染html元素。那如何去获取html元素呢？

第一步，在setup定义一个空的ref,并抛出去

<script>
import { ref } from 'vue'

export default {
    setup(){
        const htmlRef = ref<null | HTMLELEMENT>(null)
        
        //这里使用里面的validate属性
        (htmlRef.value as any).validate
        return {
            htmlRef
        }
    }
}
</script>

第二步，在html元素中设置ref为上面抛出去的属性

<div ref="htmlRef"></div>

注意 setup方法抛出去的属性要和元素上ref设置的属性保持一致。