- vue对象观察模块源码学习（中）

• 本文源码基于2.6.11版本 尝试着从源码角度来学习，这是我个人的一些理解发出来与大家沟通讨论

收集依赖

首先在定义属性的get方法之中，会判断是否之前已经存在get方法，然后判断当前是否存在dep.target，也就是说在触发get方法的时候，如果是需要进行响应式处理的模块，才会进行接下来的操作，如果只是一个普通的调用，是不会进行收集依赖的。

/vue/src/core/observer/dep.js

当前属性在被调用的时候如果存在watcher，那么就会收集当前的watcher，将它们保存起来，添加到之前新建dep实例之中。通过这样的方式，就将所有用到该值的watcher收集了起来，在值发生改变的时候通知这些watcher去更新.

/vue/src/core/observer/watcher.js

在完成了当前watcher的生命之后，则会对当前的dep数组进行一个清理，因为修改数据触发set后会触发watcher的更新，在wtacher的更新期间又会重新收集依赖，所以会将新旧依赖进行一个比较，将不存在的依赖进行一个移除，以保证在下一次的触发更新时，不会触发那些本不需要更新的watcher进行更新。
比如，有两个组件都依赖了一个变量，那么这个变量更新时则会触发两个模块的更新，当其中一个模块因为条件隐藏起来时，变量更新就没必要去更新那个隐藏模块了（虽然看不到），但是也是对性能的优化。

vue对象观察模块源码学习（上）juejin.cn/post/699141…