vue-nextTick原理

53 阅读1分钟

参考文章:segmentfault.com/a/119000001…

在数据发生改变时,会触发数据绑定的dep实例的notify方法,循环执行绑定的watcher.update方法,然后触发queueWatcher,判断flushing是否为false(flushing代表当前Watcher对列是不是正在执行更新),如果否则将当前Watcher添加到队列队尾。如果队列正在更新,通过while循环判断,如果当前watcher已经执行,在正在执行的watcher后面插入一个新的当前watcher,如果没有还未执行,放到当前watcher的后面。接着判断waiting(保证每次只执行一个队列更新方法flushSchedulerQueue),执行nextTick(flushSchedulerQueue),nexttick会将传入的flushSchedulerQueue存入callbacks,然后判断pengding(等待执行状态),false则执行timerFunc,核心逻辑就是根据兼容性添加一个异步任务,执行flushCallbacks方法,flushCallbacks会循环执行callbacks的每一项(watcher更新队列、$nextTick添加的回调)

flushSchedulerQueue主要逻辑是对当前队列中的watcher根据id从小到大排序(保证父子组件的父组件先执行,watch属性的watcher在渲染watcher之前执行,子组件在父组件watcher执行期间销毁时可以跳过),然后依次执行每个watcher.run(渲染watcher会触发更新视图,其他watcher执行对应的回调),然后重置队列状态,执行updated钩子函数。

pending默认是false,在调用timerFunc前置为true,然后当调用了flushCallbacks后又置为false。可以看出它就是一个标志位,代表着一个事件循环周期。flushCallbacks是在timerFunc中调用的

notify: image.png

update: image.png

queueWatcher: image.png

flushSchedulerQueue: image.png

nextTick: image.png

timerFunc: image.png

flushCallbacks: image.png