nextTick 原理

由来

• VUE的数据驱动视图更新是异步的，即修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后,再统一行视图更新。

触发时机

• 在同一事件循环中的数据变化后，DOM完成视图更新，立即执行nextTick(callback)内的回调。

原理

• 主要是将callback回调函数放入微任务或者宏任务里。
• 对当前环境进行降级处理，尝试使用原生的Promise.then、MutationObserver、setImmediate，若这三个都不支持，则使用setTimeout.
• 微任务：Promise.then和MutationObserver;
  • MutationObserver: 是Html5的新特性，用来监听目标DOM结构是否发生改变，若改变则执行对应的回调函数。
• 宏任务：setImmediate、setTimeout

总结

• 把回调函数放入callbacks等待执行
• 将执行函数放到微任务或者宏任务中
• 事件循环到了微任务或者宏任务，执行函数依次执行callbacks中的回调