vue依赖收集入门到精通(已入门,精通待完善)

想研究一下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中移除。

总结

 虽然感觉入门了,但是还是缺少实战,对于融汇贯通,还是缺少一点意思。我再研究一下源码,再继续完善这篇文章

你可能感兴趣的:(vue,js)