nextTick

使用nextTick获取最新的 DOM 元素内容

示例：

<template>
    <div ref="test">{{name}}</div>
    <el-button @click="changeName">按钮</el-button>
</template>

<script setup>
    import { ref, nextTick } from 'vue'
    const name = ref("tom")
    const test = ref(null)  //test.value是个DOM元素

    function changeName(){
        name.value = 'Jack'               //既希望名字发生改变的同时又获取到内容，给div定义一个ref
        console.log(test.value.innerText) //获取DOM元素里的内容，加.innerText即可获取  tom
                                          //当数据发生改变时，页面上视图重新渲染展示出的Jack，但实际上控制台拿到的数据还是tom
    }
    //拿到最新的渲染结果，引入nextTick
    //将函数定义为异步函数
    async function changeName(){
        name.value = 'Jack'
        console.log('before',test.value.innerText) //tom
        await nextTick()                  //在nextTick异步执行完之后，再去打印，便能获取到最新的渲染结果
        console.log('after',test.value.innerText) // Jack
    }
    return { name, test, handleClick }
</script>

vue3—nextTick

nextTick