vue $nexttick

作者：以往沧海发布日期:2025-12-27 浏览:45

// 使用 Vue 的 $nextTick 方法

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    updateMessage() {
      this.message = 'Updated Message';
      // DOM 还没有更新
      console.log(document.getElementById('message').innerText); // 输出: Hello Vue!

      this.$nextTick(() => {
        // DOM 已经更新
        console.log(document.getElementById('message').innerText); // 输出: Updated Message
      });
    }
  }
});

解释说明：

$nextTick 是 Vue 提供的一个方法，用于在下次 DOM 更新循环结束之后执行延迟回调。当数据发生变化时，Vue 会批量处理 DOM 更新，而 $nextTick 可以确保在 DOM 更新完成后执行指定的回调函数。
在上面的例子中，this.message 的值被修改后，DOM 并不会立即更新。通过使用 this.$nextTick，我们可以确保在 DOM 更新完成后再执行回调函数中的代码。

上一篇：vue 3.0

下一篇：vue3+ts+vite