observer,watcher,dep关系

1. Observer（观察者）：

   • Observer 是 Vue.js 中用于监测数据变化的核心模块之一。
   • Observer 会递归地遍历数据对象，将对象的每个属性都转换为 getter/setter，并且给每个属性都创建一个对应的 Dep 实例。
   • Observer 监听到数据的变化后，会通知对应的 Dep 对象，并触发相应的更新操作。

2. Watcher（观察者）：

   • Watcher 是 Vue.js 中用于监听数据变化并执行相应操作的对象。
   • Watcher 会被添加到数据的依赖收集器中，以便在数据发生变化时能够得到通知。
   • Watcher 对象包含一个回调函数，在数据变化时会执行该回调函数。
   • Watcher 对象会在初始化时，根据表达式创建对应的 getter，并在初始化时触发一次数据的获取操作，从而建立起依赖关系。

3. 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的时候，再一个是 模板渲染的时候

待续