Vue中this.$nextTick原理

$nextTick的原理以及应用

1. 原理：本质是对 JavaScript 执行原理EventLoop的一种应用。EventLoop其实就是事件循环（另外写篇笔记）。nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。

2. 为什么要用nextTick

   1. 如果是同步更新，则多次对一个或多个属性赋值，会频繁触发 UI/DOM 的渲染，所以，用异步更新可以减少一些无用渲染，提高性能
   2. 同时由于 VirtualDOM 的引入，每一次状态发生变化后，状态变化的信号会发送给组件，组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点，然后对 DOM 进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将浪费更多的性能，所以异步渲染变得更加至关重要

3. 什么时候用：DOM1的数据发生了变化，而DOM2需要从DOM1中获取数据，那这时就会发现DOM2的视图并没有更新【在开发中，主要还是表格列表数据的更新】

   1. 在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要方法在nextTick()的回调函数中。

   2. 在vue生命周期中，如果在created()钩子进行DOM操作，也一定要放在nextTick()的回调函数中。

      1. 因为在created()钩子函数中，页面的DOM还未渲染，这时候也没办法操作DOM，所以，此时如果想要操作DOM，必须将操作的代码放在nextTick()的回调函数中。

   3. this.$nextTick(() => {
          // 获取数据的操作...
      })