简述 Vue 响应式数据的原理？（ 重点 ）
可以补充的细节（让图更严谨）
-
明确标注 Vue 2 和 Vue 3 的差异：
-
Vue 2：
defineProperty只能劫持已存在的属性，无法监听对象新增 / 删除、数组索引变化。 -
Vue 3：
Proxy直接代理整个对象，天生支持上述场景。 -
补充 Vue 3 的
track/trigger：对应 Vue 2 的getter收集依赖和setter派发更新。 -
补充 Dep 和 Watcher 的关系：每个属性对应一个 Dep，Dep 管理多个 Watcher；一个 Watcher 可以对应多个 Dep（组件中多个数据依赖）。
总结
总结
三个模型;
-
*--Observer : 监听者 **Observer 负责劫持数据对象的所有属性
-
*--Watcher: 观察者 **Watcher 是一个观察者对象--作为中转站
-
*--Dep: 订阅者**Dep 用于依赖收集
数据劫持: Observer 遍历对象属性 (vue3加上方法:增加和删除)
-
-vue2 : Object.defineProperty
-
-劫持 定义每个属性
getter或setter -
-vue3 : Proxy (代理)
-
-劫持 整个数据对象 (或者对数组索引和新增/删除属性)
getter依赖收集
-
-vue2: getter
-
-vue3:
handler的get函数 （track）
setter:通知 watcher(观察者) 派发更新
-
-vue2: setter
-
-vue3:
handler的set函数 （trigger）
watcher 的发布订阅模式 --作为中转站