怎么在vue3里面使用$nextTick

在 Vue 3 中，`$nextTick` 方法已经被移除了。取而代之的是使用 `nextTick` 函数来执行下一次 DOM 更新后的回调函数。以下是一个示例：

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

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

export default {
  setup() {
    const message = ref('初始消息');

    const updateMessage = () => {
      message.value = '更新后的消息';

      nextTick(() => {
        // 在 DOM 更新后执行的回调函数
        console.log('DOM 已更新');
      });
    };

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

在上面的示例中，当点击按钮时，`updateMessage` 函数会将 `message` 的值更新为 '更新后的消息'。然后，我们使用 `nextTick` 函数来注册一个回调函数，在 DOM 更新后执行。在这个回调函数中，你可以执行需要在 DOM 更新后进行的操作。

需要注意的是，在 Vue 3 中，`nextTick` 函数返回一个 Promise 对象，你也可以使用 `await` 关键字来等待 DOM 更新完成。例如：

const updateMessage = async () => {
  message.value = '更新后的消息';

  await nextTick();
  // 在 DOM 更新后执行的操作
};

这样，你可以在 `await nextTick()` 后执行一些需要等待 DOM 更新完成后才能进行的操作。