vue中的nextTick

Posted on

在 Vue.js 中， nextTick方法用于在 DOM 更新之后执行回调函数。它的使用方式是调用 this.$nextTick()，并传入一个回调函数作为参数。回调函数将在 DOM 更新之后被执行，这样可以确保在修改数据之后立即操作 DOM。

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createApp, nextTick } from "vue";
const app = createApp({
  setup() {
    const message = ref("Hello!");
    const changeMessage = async (newMessage) => {
      message.value = newMessage;
      // 这里获取DOM的value是旧值
      await nextTick();
      // nextTick 后获取DOM的value是更新后的值
      console.log("Now DOM is updated");
    };
  },
});

nextTick 方法的原理是利用 JavaScript 的事件循环机制。当你修改了 Vue 实例的数据后，Vue 引擎会在下一个事件循环周期中异步地执行 DOM 更新。而 nextTick 方法正是在当前的事件循环周期结束时注册一个微任务，确保其回调函数在下一个 DOM 更新之后执行。

具体来说，nextTick 方法会利用浏览器提供的 Promise、MutationObserver 或 setImmediate（如果可用）等异步任务调度机制，在下一个微任务或宏任务中执行注册的回调函数。这样可以确保回调函数在 DOM 更新之后被调用，从而避免了在修改数据之后立即操作 DOM 可能导致的问题。

为什么要 nextTick

一个例子让大家明白，如果没有 nextTick 更新机制，那么 num 每次更新值都会触发视图更新，有了 nextTick 机制，只需要更新一次，所以为什么有 nextTick 存在，相信大家心里已经有答案了。

1
2
3
4
{{num}}
for(let i=0; i<100000; i++){
	num = i
}

总结

nextTick 是 vue 中的更新策略，也是性能优化手段，基于 JS 执行机制实现

vue 中我们改变数据时不会立即触发视图，如果需要实时获取到最新的 DOM，这个时候可以手动调用 nextTick