Vue中nextTick原理

nextTick

1. 作用：在下一次DOM循环更新结束之后执行延迟回调，在修改数据后，调用该方法，可以获得更新后的DOM。
2. 原理：
   在Vue中是以异步执行DOM更新的。

异步的执行机制：

1. 所有的同步任务都会放在主线程上执行，形成一个执行栈。
2. 所有的异步任务会放在主线程外，形成一个任务队列，当异步任务有了结果时，会在任务队列中保存一个事件
3. 当执行栈上的同步任务全都执行完毕之后，主线程会来读取任务队列上，看看有哪些事件。那些对应的异步任务会结束等待状态，进入执行栈，开始执行。
4. 主线程会不断重复以上步骤。
   主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

过程

1. nextTick方法中会开启一个异步队列，并缓存此次事件循环中所有的数据变化，当一个watcher（订阅者）被多次触发时，只会被推入该异步队列中一次。
2. 等到此次事件循环中所有的同步任务执行完毕之后，开始执行该异步队列中watcher的更新函数。Vue会在内部尝试对该异步队列中的任务用Promise的方式执行，若支持Promise，则将这些任务标记成Promise.then执行；若不支持，则判断是否支持MutationObserver，若支持，则new一个MutationObserver类，创建一个文本节点进行监听，当数据发生变化了就会异步执行flushCallbacks方法；若不支持，则判断是否支持setImmediate方法，如果支持setImmediate 就去异步执行flushCallbacks方法。如果以上三种方法都不支持，就使用setTimeout，然后异步去执行flushCallbacks方法，flushCallbacks中就是将传递的函数依次执行。

参考链接：
https://segmentfault.com/a/1190000012861862
https://blog.csdn.net/qq_42072086/article/details/106987202#comments_12667365