【面试题系列Vue04】Vue.js中 $nextTick 原理及作用

作用：

$nextTick主要用于延迟执行某个函数，直到下一次DOM更新循环结束之后。这通常在你修改了一些数据，并且想要等待Vue完成DOM的重新渲染后，才执行依赖于新DOM的操作时使用。

常见的使用场景包括：

• 在DOM更新后执行DOM依赖的操作，如操作滚动位置、聚焦输入框、或是基于新布局的计算。
• 在进行了一系列数据更新后，确保所有的DOM变更都已完成。

原理：

Vue.js 使用异步队列的方式来处理DOM更新。当你修改数据时，视图不会立即重新渲染。相反，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个"watcher"被多次触发，只会被推入到队列中一次。这种在缓冲时去重的机制避免了不必要的计算和DOM操作。然后，在下一个事件循环“tick”中，Vue刷新队列并执行实际的(已去重的)工作。

nextTick实际上是在内部使用了微任务（microtask），如Promise或MutationObserver（在不支持Promise的浏览器中）。这些微任务在JavaScript的事件循环中的当前任务结束后，下一个任务开始前执行。因此，使用nextTick可以确保它内部的回调函数在DOM更新完成后立即执行。

代码

export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated';
      this.$nextTick(() => {
        // 这个代码块将在DOM更新完成后执行
        console.log('DOM updated');
      });
    }
  }
}

在这个例子中，当updateMessage方法被调用时，message数据会被更新。由于Vue的DOM更新是异步的，直接在数据更新后打印DOM可能还是旧的。使用$nextTick可以确保在DOM更新后执行代码，此时DOM已经是最新的。

总结

nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中的示例，引入异步更新队列机制的原因∶
如果是同步更新，则多次对一个或多个属性赋值，会频繁触发 UI/DOM的渲染，可以减少一些无用渲染。同时由于 VirtualDOM 的引入，每一次状态发生变化后，状态变化的信号会发送给组件，组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点，然后对 DOM 进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将浪费更多的性能，所以异步渲染变得更加至关重要。

Vue 采用了数据驱动视图的思想，但是在一些情况下，仍然需要操作DOM。有时候，可能遇到这样的情况，DOM1 的数据发生了变化，而 DOM2需要从 DOM1 中获取数据，那这时就会发现 DOM2 的视图并没有更新，这时就需要用到了 nextTick 了。

总结来说，$nextTick是处理Vue中数据变更后DOM更新异步性的一种有效工具，它确保了在进行DOM依赖操作时，DOM状态是最新的。