核心内容摘要
黄台软件：数字时代的护航者，重塑你的工作与生活
基本原理当一个 Vue 实例创建时Vue 会遍历 data 中的属性用 Object.defineProperty(vue
0 使用 proxy) 将它们转为 getter/setter并且在内部追踪相关依赖在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 程序实例它会在组件渲染的过程中把属性记录为依赖之后当依赖项的 setter 被调用时会通知 watcher 重新计算从而致使它关联的组件得以更新。
更细致的理解vue 的基本原理也就是响应式原理。
Vue 的“响应式”简单说就是数据变了页面自动更新不需要你手动操作 DOM。
当 Vue 实例创建时发生了什么Vue 会对 data 对象里的所有属性做“劫持”Vue 2 用Object.defineProperty简称 definePropertyVue 3 用Proxy性能更好这个过程叫数据劫持或响应式转换。
Object.defineProperty 是怎么工作的Vue 2Vue 遍历 data 对象对每个属性用 defineProperty 改写成getter当你读取这个属性时触发getsetter当你修改这个属性时触发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“数据变了去重新渲染吧”。
Watcher 是什么它怎么工作每个组件都有一个对应的Watcher订阅者组件第一次渲染时会触发所有 data 属性的 get → 收集依赖Dep 收集 Watcher。
数据变化时set 触发 → Dep 通知所有 Watcher → Watcher 重新执行渲染函数 → 更新 DOM。
一句话Watcher 就是“订阅者”它订阅了 data 的变化数据一变它就重新渲染组件。
依赖收集和派发更新的完整流程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 重新渲染实现‘数据变 → 页面自动更新’。