observer,watcher,dep关系

原创已于 2024-06-26 09:05:11 修改 · 1.2k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-02-18 23:38:43 首次发布

3 篇文章

订阅专栏

Observer（观察者）：
- Observer 是 Vue.js 中用于监测数据变化的核心模块之一。
- Observer 会递归地遍历数据对象，将对象的每个属性都转换为 getter/setter，并且给每个属性都创建一个对应的 Dep 实例。
- Observer 监听到数据的变化后，会通知对应的 Dep 对象，并触发相应的更新操作。
Watcher（观察者）：
- Watcher 是 Vue.js 中用于监听数据变化并执行相应操作的对象。
- Watcher 会被添加到数据的依赖收集器中，以便在数据发生变化时能够得到通知。
- Watcher 对象包含一个回调函数，在数据变化时会执行该回调函数。
- Watcher 对象会在初始化时，根据表达式创建对应的 getter，并在初始化时触发一次数据的获取操作，从而建立起依赖关系。
Dep（依赖收集器）：
- Dep 是 Vue.js 中用于管理依赖关系的对象。
- Dep 对象用来存储 Watcher 对象，并在数据发生变化时通知对应的 Watcher 执行更新操作。
- 每个数据属性都会有一个对应的 Dep 实例，用于存储该属性的依赖关系。

关系如下：

在数据初始化阶段，Observer 会递归地遍历数据对象，并为每个属性创建 getter/setter。
当 Watcher 对象被创建时（比如在组件渲染或使用 watch 选项时），会将 Watcher 添加到数据的依赖收集器中，同时创建对应的 getter，并在初始化时触发一次数据的获取操作，建立依赖关系。
在数据属性的 getter 中，会将当前 Watcher 对象添加到对应的 Dep 实例中，建立起 Watcher 与 Dep 之间的关系。
当数据属性发生变化时，Observer 会通知对应的 Dep 实例，Dep 实例会通知所有的 Watcher 对象执行更新操作。

总的来说，Observer 负责将数据转换为响应式的对象，Watcher 负责监听数据变化并执行相应的操作，Dep 则负责管理 Watcher 对象和通知 Watcher 执行更新操作，三者共同构成了 Vue.js 响应式系统的核心。

watch 在初始化阶段，要是模板中有 watch选项，就会进行添加watcher处理,还有定义computed的时候，再一个是模板渲染的时候

待续