vue3 $nexttick

<template>
  <div>
    <p v-if="isShow">{{ message }}</p>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const isShow = ref(false);
    const message = ref('Hello Vue 3');

    const toggleMessage = async () => {
      isShow.value = !isShow.value;
      // 确保 DOM 已经更新
      await nextTick();
      if (isShow.value) {
        console.log('DOM has been updated');
      } else {
        console.log('DOM will be updated');
      }
    };

    return {
      isShow,
      message,
      toggleMessage
    };
  }
};
</script>

解释说明：

• nextTick 是 Vue 3 中的一个方法，用于在下一次 DOM 更新周期结束之后执行延迟回调。这意味着你可以在 nextTick 的回调函数中获取到最新的 DOM 状态。
• 在上面的代码示例中，点击按钮会切换 isShow 的值，从而控制 <p> 标签的显示与隐藏。
• 使用 await nextTick() 可以确保在 DOM 更新之后再执行后续代码，因此可以在回调中访问到最新的 DOM 状态。