vue3 nexttick()

// 使用 Vue 3 的 nextTick 示例

<template>
  <div>
    <p v-if="showMessage">{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

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

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

    const updateMessage = async () => {
      showMessage.value = false;
      message.value = 'Updated message!';

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

      // 在这里可以安全地操作更新后的 DOM
      console.log('DOM updated');
      showMessage.value = true;
    };

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

<!-- 解释说明：
1. `nextTick` 是 Vue 提供的一个工具函数，用于在下次 DOM 更新循环结束之后执行延迟回调。
2. 在这个示例中，我们先将 `showMessage` 设置为 `false` 并更新 `message`，然后使用 `await nextTick()` 确保这些更改已经反映到 DOM 中。
3. 最后，我们将 `showMessage` 设置为 `true`，使更新后的消息显示出来。
4. 这样可以确保我们在 `console.log('DOM updated')` 时，DOM 已经根据最新的状态进行了更新。 -->