vue异步更新实现过程
dep.notify()=>update()=> queueWatcher()=>nextTick()=>timerFunc(fn)=>flushCallbacks()=>flushSchedulerQueue()=>watcher.run()=>cb|render()
1.数据发生变化时,触发收集器调用watcher的notify()方法。notify()方法执行对于dep(单个属性)的update()方法进行更新
2.每个watcher对应一个update方法,update方法中调用watcher队列方方法,将所有的watcher放在一个队列函数中queueWatcher
3.queueWatcher进行判断 如果已经进入队列则不重复添加, 如果队列已经执行刷新则 倒叙 遍历 通过当前的watcher.id 找到它大于队列中的watcher.id 插入到队列中,将队列刷新的方法传到nextTick()
4.nextTick()将刷新队列的方法以回调函数的方式添加到 刷新callbacks数组中 通过timeFunc()方法将flushCallbacks()放在浏览器的异步队列中
5.flushCallbacks()遍历callbacks的数据执行每一个callbacks函数,在callbacks数组中调用传入的刷新队列方法,执行watcher.run()方法触发render()渲染或者执行用户传入的回掉函数