setup中的nextTick函数

一嘴一个橘子2023-09-07 18:18

await nextTick() 是 Vue 3 的一个异步函数，用于等待 DOM 更新完成后执行回调函数，

它在 setup 函数中非常有用，可以确保在对 DOM 进行操作之前，先等待 Vue 完成相关的 DOM 更新。

下面是一个示例，演示了 await nextTick() 的用法：

js 复制代码

<template>
  <div>
    <p ref="message">{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

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

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

    // 更新消息
    async function updateMessage() {
      message.value = '更新中...';
      await nextTick(); // 等待 DOM 更新
      message.value = '消息已更新！';
    }

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

这里使用 await nextTick() 来确保在更新消息之前等待 Vue 完成相关的 DOM 更新。

首先，当点击按钮时，updateMessage 函数会先将 message 的值更新为 "更新中..."，

然后，使用 await nextTick() 等待 DOM 更新完成，

再然后，一旦 DOM 更新完成，message 的值会再次更新为 "消息已更新！"，并且在页面上显示出来。

使用 await nextTick() 可以确保在对 DOM 进行操作之前，先等待 Vue 完成相关的 DOM 更新，以避免出现不一致的情况。