vue3中使用nextTick

在Vue 3中，nextTick 方法被引入到 Vue 实例的 mounted 钩子中，以及全局 onMounted 钩子中。它用于访问更新后的 DOM。

以下是如何在 Vue 3 组件中使用 nextTick 的示例：

<template>
  <div>
    <span ref="spanElement">Span content</span>
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const spanElement = ref(null);
 
    onMounted(() => {
      // 在DOM更新之后执行
      spanElement.value.textContent = 'Updated content';
 
      // 使用nextTick确保DOM已经更新
      nextTick(() => {
        console.log(spanElement.value.textContent); // 输出 'Updated content'
      });
    });
 
    return {
      spanElement
    };
  }
};
</script>

在这个例子中，我们首先在模板中定义了一个 span 元素，并通过 ref 属性给它设置了一个引用名 spanElement。在 onMounted 钩子中，我们改变了这个元素的 textContent 并且使用 nextTick 确保在 DOM 更新之后执行日志输出。这样可以保证我们访问的 DOM 是最新的。