vue.nextTick核心原理

nextTick()和$nextTick()唯一区别就是组件传递给 this.$nextTick() 的回调函数会带上 this 上下文，其绑定了当前组件实例。

Vue有两种选择，一个是在本次事件循环的最后进行一次DOM更新，另一种是把DOM更新放在下一轮的事件循环当中。但是因为本轮事件循环最后执行会比放在下一轮事件循环要快很多，所以Vue优先选择第一种，只有当环境不支持的时候才触发第二种机制。

在Vue官方文档中是这样说明的：
可能你还没有注意到，Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中所有发生改变的数据。如果同一个watcher被多次触发，只会被推入到队列中一次，这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。等同一事件循环机制内所有数据变化完成后，再统一进行DOM更新。

$nextTick是怎样完成这个神奇的功能的呢？ 核心如下:
Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0)代替。（四种原生的异步方法其实是做兼容性处理，浏览器支持哪种则用哪种异步方法，在vue3中没做兼容性处理，只用了Promise.then）。
继而vue内部的nextTick方法可能是微任务，也可能是宏任务

手写vue源码中nextTick的实现原理：

pending：标识，批处理，避免重复操作，这下面的pending是你在更新多个数据时，可能
要更新多个watcher,但你也只需要传入一个flushSchedulerQueue方法即可。当vue
在本次事件循环的最后进行DOM更新后，再把pending置为false，准备用于下一次数据更新。
watcher.run()就是为了更新dom
1
2
3
4

flushCallbacks()：从callbacks数组中取出的元素，实际上一个是vue内部调用
nextTick时的回调函数，一个是用户调用nextTick时的回调函数，然后统一执行。
（代码错了，不是用pop,该用数组的shift方法依次取出第一个元素）
正常用户使用nextTick时的回调函数都会被加入回调函数队列的末尾，所以当用户在
nextTick后的操作dom已经更新
1
2
3
4
5

pending：标识，批处理，避免重复操作，因为用户和vue内部都执行nextTick的话，只需要调用一次timerFunc方法即可
timerFunc：用来触发执行回调函数，也就是Promise.then或MutationObserver或
setImmediate 或setTimeout的过程
1
2
3