一、基本原理
当一个 Vue 实例创建时，Vue 会遍历 data 中的属性，用 Object.defineProperty(vue3.0 使用 proxy) 将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
二、更细致的理解
vue 的基本原理也就是：响应式原理。Vue 的“响应式”简单说就是：数据变了，页面自动更新，不需要你手动操作 DOM。
1. 当 Vue 实例创建时发生了什么？
Vue 会对 data 对象里的所有属性做“劫持”：
- Vue 2 用Object.defineProperty（简称 defineProperty）
- Vue 3 用Proxy（性能更好）
这个过程叫数据劫持或响应式转换。
2. Object.defineProperty 是怎么工作的？（Vue 2）
Vue 遍历 data 对象，对每个属性用 defineProperty 改写成：
- getter：当你读取这个属性时触发（get）
- setter：当你修改这个属性时触发（set）
// 简化版伪代码，Vue 内部就是这么做的 function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, // 可枚举 configurable: true, // 可配置 get() { console.log(`读取 ${key}：${val}`); // Dep：依赖收集者 -> 记录“谁”在用这个属性 if (Dep.target) { // Dep.target 是当前 Watcher dep.depend(); // 把 Watcher 加到依赖列表 } return val; }, set(newVal) { if (newVal === val) return; console.log(`修改 ${key}：${val} → ${newVal}`); val = newVal; // 通知更新：派发更新 dep.notify(); // 告诉所有依赖这个属性的 Watcher：“数据变了，快更新！” } }); }- 依赖收集：在 get 时，把当前正在渲染的组件（Watcher）记录下来（“谁依赖了我”）。
- 派发更新：在 set 时，通知所有依赖它的 Watcher：“数据变了，去重新渲染吧”。
3. Watcher 是什么？它怎么工作？
每个组件都有一个对应的Watcher（订阅者）：
- 组件第一次渲染时，会触发所有 data 属性的 get → 收集依赖（Dep 收集 Watcher）。
- 数据变化时，set 触发 → Dep 通知所有 Watcher → Watcher 重新执行渲染函数 → 更新 DOM。
一句话：Watcher 就是“订阅者”，它订阅了 data 的变化，数据一变，它就重新渲染组件。
4. 依赖收集和派发更新的完整流程（Vue 2）
- 组件渲染 → 访问 data 属性 → 触发 get → Dep 收集当前 Watcher（依赖收集）。
- 数据修改 → 触发 set → Dep 通知所有 Watcher（派发更新）。
- Watcher 收到通知 → 重新执行 render → 生成新 VNode → diff → 更新真实 DOM。
5. 总结一句话
Vue 的响应式核心是通过数据劫持 + 发布订阅模式实现的：Vue 2 用 Object.defineProperty 劫持属性，Vue 3 用 Proxy 劫持对象。在渲染时收集依赖（get 时记录 Watcher），数据变化时派发更新（set 时通知 Watcher 重新渲染），实现‘数据变 → 页面自动更新’。
