Vue 中 $nextTick 的使用？

$nextTick 是 Vue 提供的一个方法，用于在 DOM 更新之后执行代码。在 Vue 中，更新 DOM 是异步执行的，当你修改数据后，Vue 并不会立即更新 DOM，而是将 DOM 更新放入队列中，然后在一个事件循环（Event Loop）之后执行。

$nextTick 方法的作用是在 DOM 更新完成后，立即执行传入的回调函数。这对于需要在更新后操作 DOM 的情况非常有用。

使用方法

// 在 Vue 实例方法内部
this.$nextTick(() => {
  // 在 DOM 更新完成后执行的操作
});

// 在组件中
methods: {
  someMethod() {
    // 修改数据
    this.someData = 'new value';

    // 在 DOM 更新后执行操作
    this.$nextTick(() => {
      // 操作更新后的 DOM
    });
  }
}

例子

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

<script>
export default {
  data() {
    return {
      message: 'Original message',
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
      this.nextTick(() => {
        // 在 DOM 更新后获取更新后的文本内容
        console.log(this.refs.message.textContent); // 输出：'Updated message'
      });
    },
  },
};
</script>

这个例子中，当点击按钮更新消息时，使用 $nextTick 确保在 DOM 更新后获取更新后的文本内容，避免直接获取导致拿到的是旧的文本内容。这样可以保证在更新后操作 DOM 的数据是最新的。