vue3 $nexttick使用

在 Vue.js 3 中，可以使用 `nextTick` 函数来在 DOM 更新后执行回调函数。这个函数返回一个 Promise 对象，可以用来在 DOM 更新后执行一些操作，例如获取更新后的元素的属性值等。

下面是一个使用 `nextTick` 的示例：

// 在组件中使用 nextTick
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, Vue 3!'
      this.$nextTick(() => {
        console.log('Updated message:', this.$el.textContent)
      })
    }
  }
}

在上面的代码中，当 `updateMessage` 方法被调用时，会更新 `message` 的值，并使用 `nextTick` 函数来监听 DOM 更新后执行回调函数。在回调函数中，可以通过 `$el` 访问到组件的根元素，并获取更新后的文本内容。

需要注意的是，在 Vue.js 3 中，`nextTick` 函数不再接受一个回调函数作为参数，而是返回一个 Promise 对象。如果需要在 DOM 更新后执行一些操作，可以使用类似下面的代码：

// 使用 Promise 和 async/await
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    async updateMessage() {
      this.message = 'Hello, Vue 3!'
      await this.$nextTick()
      console.log('Updated message:', this.$el.textContent)
    }
  }
}

在上面的代码中，`updateMessage` 方法使用 `async/await` 关键字来等待 `nextTick` 函数返回的 Promise 对象，以确保在 DOM 更新后执行回调函数。