vue异步更新原理心得

Vue2.0源码-异步更新原理

1. 改变一组数据时，会触发同数量的 watcher更新。解决问题方法：异步更新，即所有数据改变完成后，watcher对应处理完成后，在用watcher一起更新视图
2. watcher 调用 update方法，表示数据已经改变， 只是还没更新视图。
3. 异步更新，需要异步队列的机制
4. 机制： 1. 属性一个数组queue储存watcher， 2。queueWatcher方法，去重后数组 queue添加watcher，执行 nextTick(数组 queue添加watcher，都添加完成后， 在一起调用flushSchedulerQueue方法，执行数组queue次) 3. flushSchedulerQueue方法， 遍历数组queue并执行watcher的run方法, 执行一次后数组queue会清空， 以后在执行 也不会有影响
5. nextTick 方法，callbacks数组 储存nextTick传进来的回调方法，1. callbacks数组的push ，通过 pending属性达到 只执行一次异步方法timerFunc
6. 异步方法timerFunc 1. promise 实现 2. MutationObserver 主要是监听dom变化 也是一个异步方法 3. setImmediate 4. setTimeout
7. nextTick 达到异步效果， 相当于 一堆watcher

callbacks.push(queueWatcher1.flushSchedulerQueue)
Promise.resolve().then(() => {
    callbacks.forEach((item) => {
        item()
    })
})
callbacks.push(queueWatcher2.flushSchedulerQueue)
callbacks.push(queueWatcher3.flushSchedulerQueue)
callbacks.push(queueWatcher4.flushSchedulerQueue)
callbacks.push(queueWatcher5.flushSchedulerQueue)

一堆 push方法 + Promise.resolve().then()(加入微队列， 下一次队列循环会优先执行), 结果 push先执行完成后，Promise then 方法才执行，达到异步效果