day125-vuejs源码-nextTick()-1

前言

了解vuejs中的异步更新DOM策略,了解vuejs操作DOM过程中一些原理。

代码

// vuejs 中的 nextTick
// 响应式数据发生变化的时候,它的setter函数会通知闭包中的Dep,Dep则会调用它管理的所有Watch对象。触发Watch对象的update实现。
/**
* Subscriber interface.
* Will be called when a dependency changes.
*/
// 在watcher.js文件中
update () {
/* istanbul ignore else */
// this.lazy = !!options.lazy 和 deep什么的同级
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
/*同步则执行run直接渲染视图*/
this.run()
} else {
/*异步推送到观察者队列中*/
queueWatcher(this)
}
}
// <scheduler.js>
/**
* Push a watcher into the watcher queue.
* Jobs with duplicate IDs will be skipped unless it's
* pushed when the queue is being flushed.
* // 队列刷新完毕之后watcher才会被推入watcher队列
*/
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
// 哈希表has,标记是否存在id,这个id指的是?
// 如果不是刷新状态也不是等待状态则进入刷新事件队列。
if (has[id] == null) {
has[id] = true
if (!flushing) {
// 不在刷新状态中,直接推到队列中
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true

if (process.env.NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
nextTick(flushSchedulerQueue)
}
}
}
文章作者: lmislm
文章链接: http://lmislm.com/2019/05/17/2019-05-17/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog