vue依赖收集入门到精通（已入门，精通待完善）

想研究一下vue的原理，做一个自我总结。

参考文章：
vue.js技术揭秘：讲的很细致，入门必读
深入接续vue依赖收集原理：实例较多，进阶教程
从vue源码看观察者模式：功力不够，暂时无法融汇贯通
vue源码详细解析：功力不够，暂时无法融汇贯通

vue的依赖收集和dep、watcher有关。
dep： dependences的缩写，就是依赖的意思(ps:是dependences而不是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中移除。

总结

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