vue3_04ref获取标签

ref也可以用来获取dom节点

分为三步：

1.给节点绑定ref='xxx'

2.let xxx =ref()

3.在挂载之后直接使用即可

<template>
    <div ref="op">24</div>
    <p>{{ num }}</p>
    <button @click="add">点击</button>
</template>

<script lang="ts">

import { defineComponent, ref,onMounted,nextTick,onUpdated} from 'vue'

export default defineComponent({
    setup() {
        let op = ref()//获取绑定了ref属性且值为op的标签
        console.log(op.value);//undefind,setup的时候还没有挂载
        let num = ref(0)
        const add = ()=>{
                        num.value++
        }
        onMounted(()=>{
            console.log(op.value.outerText);//挂载完毕后才能获取

        })
        nextTick(()=>{
            //在下一次dom更新的时候执行(只会调用一次)
            console.log(op.value.outerText);
            
        })
        onUpdated(()=>{
            //每次更新都会执行
            console.log("更新了");
            
        })
        return {
            op,
            add,
            num
        }

    }

})
</script>

<style>

</style>