vue3使用nexttick

<template>
  <div>
    <p ref="message">{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

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

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

    const updateMessage = async () => {
      message.value = 'Updating...';

      // 使用 nextTick 确保 DOM 已经更新
      await nextTick();

      // DOM 更新后执行的代码
      console.log('DOM is updated:', document.querySelector('p').textContent);

      // 继续更新消息
      message.value = 'Updated!';
    };

    return {
      message,
      updateMessage
    };
  }
};
</script>

解释说明：

• nextTick 是 Vue 3 中的一个 API，用于在下一次 DOM 更新周期结束之后执行回调函数。
• 在上面的例子中，当我们点击按钮时，首先会更新 message 的值为 'Updating...'。由于 Vue 的响应式机制，这会触发视图的更新。
• 使用 await nextTick() 可以确保我们在 DOM 更新完成后执行后续的代码。在这个例子中，我们会在控制台输出当前的 DOM 内容，以验证 DOM 是否已经更新。
• 最后，我们将 message 更新为 'Updated!'，再次触发视图更新。

通过这种方式，我们可以确保在 DOM 更新完成后再执行某些依赖于最新 DOM 状态的操作。