vue响应式本质是通过object.defineproperty（vue 2）或proxy（vue 3）拦截数据读写，自动收集依赖（dep）并通知watcher更新视图；vue 3支持动态属性、数组索引及map/set等原生结构，且依赖逻辑解耦为effect/track/trigger模型。
Vue响应式数据劫持，本质是让数据“自己感知读写”，并在变化时自动通知视图更新——不靠轮询，也不靠手动监听，靠的是对属性访问行为的精准拦截和依赖关系的自动建立。
数据劫持：给属性装上“感应开关”
Vue 2 使用 Object.defineProperty，Vue 3 升级为 Proxy，目的都是同一个：拦截对数据的读（get）和写（set）操作。
- 读取时（如模板中 {{ msg }}），触发 getter，悄悄记下“谁正在用我”——这就是依赖收集的起点；
- 修改时（如 this.count++），触发 setter，立刻广播：“我变了！”——所有登记过的观察者收到通知；
- Vue 3 的 Proxy 拦截的是整个对象，所以新增属性、数组索引赋值、Map/Set 等原生结构都能天然响应，而 Vue 2 需要额外处理。
依赖收集：每个属性都有自己的“联系人本”
每个响应式属性背后都关联一个 Dep（依赖容器），它就像一个小型通讯录：
- 组件首次渲染时，会逐个读取 data 中的属性，触发 getter，当前组件的 Watcher 就被自动记入该属性的 Dep；
- 一个属性可能同时被模板、计算属性、watch 监听，Dep 就把它们全存下来，不区分类型；
- Dep 不做逻辑判断，只负责“登记”和“群发”，轻量又可靠。
Watcher：数据与视图之间的“快递员”
Watcher 是真正执行更新动作的角色，每个组件默认有一个渲染 Watcher：
- 创建时主动读一遍 data，完成依赖收集；
- 收到 Dep 通知后，调用 update()，触发虚拟 DOM 重新比对和真实 DOM 更新；
- computed 和 watch 也各自创建 Watcher，只是任务不同：一个缓存计算结果，一个执行副作用逻辑。
Vue 2 与 Vue 3 的关键差异在哪？
不是简单替换 API，而是响应式能力的结构性升级：
- Vue 2 的 defineProperty 只能劫持已存在的属性，新增属性需用 $set；数组通过重写 push/pop 等方法“打补丁”；
- Vue 3 的 Proxy 天然支持动态增删属性、任意索引赋值、甚至 Set/Map 等集合类型；
- Vue 3 还引入了 effect / track / trigger 抽象模型，把依赖收集逻辑从 Watcher 解耦出来，更利于组合式 API（如 reactive、ref）复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
