8. 什么是nextTick? 原理是什么?

在vue中，页面里的数据改变后，会触发setter，并通过Dep通知对应的Watcher执行_update,详见vue响应式原理。这个过程是异步的。

如果没有nextTick更新机制，每次更新数据都会触发视图更新，有了nextTick以后只需要更新一次。

原理

next-tick.js中维护了一个callbacks队列、一个pending锁、一个timerFunc函数

• callbacks队列收集当前正在执行任务队列中所有nextTick回调，等当前任务队列执行完之后好一次性for循环啪执行完。

• timerFunc函数是根据当前浏览器环境判断得出一个能够产生微任务或降级为计时器任务的api调用。（将flushCallbacks放入微队列）

  • 优先使用Promise
  • 再者是MutationObserver
  • 再或者是setImmediate
  • 最后是setTimeout

• 当pending锁为fasle时，表示第一次向callbacks队列添加回调函数，只需要在这时候执行timerfunc，创建一个为任务就好。

• 等当前任务队列执行完毕后，就会去执行微队列中的flushCallbacks（利用for循环执行callbacks），并将pending设置为false。