vue中的nextTick钩子-CSDN博客

本文链接：https://blog.csdn.net/Likkobest/article/details/131496259

文章介绍了Vue框架中的nextTick方法，它用于在DOM更新后执行回调。Vue在数据改变时会异步更新DOM，通过nextTick或者await/async配合，可以在正确的时间获取到更新后的DOM状态。在修改数据后，如果需要基于新DOM进行操作，应当使用nextTick确保操作的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是nextTick？在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

我们可以理解成，vue在更新DOM时是异步执行的。当数据发生变化，vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。

因此，当我们发现需要操作dom时，读取的数据是更新之前的，就需要使用到nextTick。

<div ref="msgDom">
        {{ msg }}
</div>
<button @click="msgChange">btn</button>

import { ref } from 'vue';

const msg = ref('123')
const msgDom = ref(null)

const msgChange = () => {
    msg.value = '999'
    console.log('数据msg=>', msg.value);
    console.log('dom=>', msgDom.value.textContent);
}

可以看到数据包括视图都是更新后的，但获取的dom节点还是旧值。

使用nextTick

const msgChange = () => {
    msg.value = '999'
    console.log('数据msg=>', msg.value);
    console.log('dom=>', msgDom.value.textContent);

    nextTick(() => {
        console.log('nextTick dom=>', msgDom.value.textContent);
    })
}

也可以利用await阻塞下方代码的特性来获取更新后的数据

const temp = () => { }
const msgChange = async () => {
    msg.value = '999'
    console.log('数据msg=>', msg.value); // 数据msg=> 999
    console.log('dom=>', msgDom.value.textContent); // dom=> 123

    await temp() // 可以用nextTick函数
    //await nextTick()
    console.log('await dom=>', msgDom.value.textContent); //await dom=> 999

}