day127-vuejs源码-nextTick()-3

前言

上一次,还记得在了解队列刷新的时候
做了方法队列刷新完毕之后watcher会被推入watcher队列,
最后做了调用了一个方法:nextTick(flushSchedulerQueue)
但是没有对方法做一些了解,这里了解下flushSchedulerQueue()。

代码

// <src/core/observer/scheduler.js>
/**
* Flush both queues and run the watchers.
*/
function flushSchedulerQueue () {
currentFlushTimestamp = getNow()
flushing = true
let watcher, id
// 注意排序的原因
// Sort queue before flush.
// This ensures that:
// 1. Components are updated from parent to child. (because parent is always
// created before the child)
// 2. A component's user watchers are run before its render watcher (because
// user watchers are created before the render watcher)
// 3. If a component is destroyed during a parent component's watcher run,
// its watchers can be skipped.
queue.sort((a, b) => a.id - b.id)

// do not cache length because more watchers might be pushed
// as we run existing watchers
// 这里???
/*这里不用index = queue.length;index > 0; index--的方式写是因为不要将length进行缓存,因为在执行处理现有watcher对象期间,更多的watcher对象可能会被push进queue*/
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
if (watcher.before) {
watcher.before()
}
id = watcher.id
//之前推入队列时候的标记:function queueWatcher()
has[id] = null
watcher.run()
// in dev build, check and stop circular updates.(注:检测函数中的死循环)
if (process.env.NODE_ENV !== 'production' && has[id] != null) {
circular[id] = (circular[id] || 0) + 1
if (circular[id] > MAX_UPDATE_COUNT) {
warn(
'You may have an infinite update loop ' + (
watcher.user
? `in watcher with expression "${watcher.expression}"`
: `in a component render function.`
),
watcher.vm
)
break
}
}
}

// keep copies of post queues before resetting state
// 注: 这里的activatedChildren方法应该是属于queueActivatedComponent()函数中保存kept-alive组件
// slice() 拷贝
const activatedQueue = activatedChildren.slice()
const updatedQueue = queue.slice()

resetSchedulerState()

// call component updated and activated hooks(注:调用钩子)
callActivatedHooks(activatedQueue)
callUpdatedHooks(updatedQueue)

// devtool hook
/* istanbul ignore if */
if (devtools && config.devtools) {
devtools.emit('flush')
}
}
文章作者: lmislm
文章链接: http://lmislm.com/2019/05/19/2019-05-19/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog