而这个表达式就对应上述的三种情况，因为 msg 改变的时候，这些表达式需要重新求值，所以这些依赖项都要保存起来，所以源码中定于了这个 Watcher 类
A watcher parses an expression, collects dependencies, and fires callback when the expression value changes. This is used for both the $watch() api and directives.
watcher.deps 数组表示该 watcher 的依赖项，值为 Dep 实例，可以理解成和 Watcher 实例的表达式有关的 data 数据。注意，deps 数组可能是空，对于 template 而言，可以是 template 中不依赖于 data，对于 computed 而言，可以是这个 computed 数据还没被获取（比如我定义了 msg2，但是程序中没有用，这时 deps 为空，这表明我如果改变了 msg，但是不需要通知到 msg2，因为 msg2 根本没用到嘛，但是我在控制台输入 vm.msg2，从而触发了 msg 的 getter，继而进行了依赖收集，这时 deps 就不为空了，这表明我已经使用了 msg2，下次 msg 更新时需要通知到 msg2 进行改变）
而对于 watch 而言，我试了下任何情况下 deps 都不为空，这需要进一步查看源码确认
deps 数组元素是 Dep 实例，该实例有个 subs 属性，是 Watcher 实例数组，表示依赖于这个 Dep 的项目
Watcher 和 Dep 比较难理解，可以暂时这样理解，Dep 和 data 挂钩，每一个 Dep 实例就对应 data 的一个键值对，Watcher 实例则依赖于 Dep，那么有三个情况会依赖，也就是以上三种（想想是不是这样，当数据更新的时候，是不是只有这三处需要同时更新，或者同时响应）
总结下：我们会对 data 中所有键值对设置 getter/setter，getter 的时候我们会收集依赖（依赖项为上面三项，并不是任何情况下都会收集依赖，比如在钩子中打印 msg，这时候就没依赖，所以源码中这里还有复杂判断），setter 的时候我们会将收集的依赖项触发，从而更新数据，理解了这些，就能初步理解 Vue 的响应式原理
以上所述是小编给大家介绍的Vue getter setter详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: