画一张watch的简单工作流程图:
把上文的 Dep,Oberver,Wather拿过来并做部分更改(增加收集依赖去重处理):
//标识当前的Dep id let uidep = 0 class Dep{ constructor () { this.id = uidep++ // 存放所有的监听watcher this.subs = [] } //添加一个观察者对象 addSub (Watcher) { this.subs.push(Watcher) } //依赖收集 depend () { //Dep.target 作用只有需要的才会收集依赖 if (Dep.target) { Dep.target.addDep(this) } } // 调用依赖收集的Watcher更新 notify () { const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } } } Dep.target = null const targetStack = [] // 为Dep.target 赋值
function pushTarget (Watcher) {
if (Dep.target) targetStack.push(Dep.target)
Dep.target = Watcher
}
function popTarget () {
Dep.target = targetStack.pop()
}
这一次 彻底理解Vue的watch实现原理及其实现方式(转)
原文:https://www.cnblogs.com/niechencn/p/11095996.html