想研究一下vue的原理,做一个自我总结。
参考文章:
vue.js技术揭秘:讲的很细致,入门必读
深入接续vue依赖收集原理:实例较多,进阶教程
从vue源码看观察者模式:功力不够,暂时无法融汇贯通
vue源码详细解析:功力不够,暂时无法融汇贯通
vue的依赖收集和dep、watcher有关。
dep: dependence的缩写,就是依赖的意思,也是观察者模式中的订阅者概念。
watcher: 观察者的意思
入门
入门强烈建议读上面第一篇文章,读通就入门了。但是和融汇贯通,形成自己的知识体系,总觉得差那么点意思。
我先把自己入门的经验写下来。
难点一:
addDep (dep: Dep) {
const id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}
- addSub就是把当前的watcher加入sub中,为了数据变化时通知。
- newDepid和depid、newDep和dep会交换,所以,只要dep中有id,那么sub中肯定有watcher。如果dep没有id,sub就添加watcher,当dep和newDep交换过后,就又保证了只要dep有id,那么sub中就有watcher
难点二:
let i = this.deps.length
while (i--) {
const dep = this.deps[i]
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this)
}
}
-
这是交换之前最后一步
-
在交换之前,dep可能已经有watcher了
-
如果dep有而newDep没有,当前依赖收集不需要通知这个watcher,所以从sub中移除。
总结
虽然感觉入门了,但是还是缺少实战,对于融汇贯通,还是缺少一点意思。我再研究一下源码,再继续完善这篇文章