Skip to main content

Vue nextTick

在 Vue 中,Dom 更新是异步的,当数据发生变化后,Vue 会把更新放到队列中,等待数据更新完毕后,再执行 DOM 更新。所以当数据发生变化后不能马上获取到最新的 Dom,这时需要使用 nextTick

用法 1

因为 nextTick() 返回的是一个 Promise,所以可以使用 await 来等待它完成

<script setup>
import { ref, nextTick } from "vue";
const count = ref(0);
async function increment() {
count.value++;
// DOM 还未更新
console.log(document.getElementById("counter").textContent); // 0
await nextTick();
// DOM 此时已经更新
console.log(document.getElementById("counter").textContent); // 1
{
/* 或者 */
}
nextTick().then(() => {
// DOM 此时已经更新
console.log(document.getElementById("counter").textContent); // 1
});
}
</script>

<template>
<button id="counter" @click="increment">{{ count }}</button>
</template>

用法 2

<script setup>
import { ref, nextTick } from "vue";
const count = ref(0);
async function increment() {
count.value++;
// DOM 还未更新
console.log(document.getElementById("counter").textContent); // 0
nextTick(() => {
// DOM 此时已经更新
console.log(document.getElementById("counter").textContent); // 1
});
}
</script>

<template>
<button id="counter" @click="increment">{{ count }}</button>
</template>