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 ， 那么有三个情况会依赖 ， 也就是以上三种（想想是不是这样 ， 当数据更新的时候 ， 是不是只有这三处需要同时更新 ， 或者同时响应）
【Vue 理解之白话 getter/setter详解】总结下：我们会对 data 中所有键值对设置 getter/setter ， getter 的时候我们会收集依赖（依赖项为上面三项 ， 并不是任何情况下都会收集依赖 ， 比如在钩子中打印 msg ， 这时候就没依赖 ， 所以源码中这里还有复杂判断） ， setter 的时候我们会将收集的依赖项触发 ， 从而更新数据 ， 理解了这些 ， 就能初步理解 Vue 的响应式原理 。
推荐阅读
- 空调遥控器ec0是什么意思 ec0n0空调上是什么意思
- 陕西都有谁的墓
- 宝莲灯的养殖方法和注意事项
- 电脑6核和8核区别介绍
- 什么是全涤纺双宫面料
- 咏柳后两句用什么形式来赞美柳叶 咏柳的后两句诗运用了什么
- 3500到10000元笔记本电脑推荐2022
- 和平精英人机房怎么开 人机房开启方法
- 蒸米饭水到手指哪里