话说回来，

Vue2 与 Vue3 响应式数据原理详解

一、主要本质

Vue 响应式的根本目标是：数据变化 → 自动更新视图。实现思路统一，分为两步：

1. 劫持/监听数据的读取收集依赖。
2. 劫持/监听数据的修改触发依赖。

使用者痛点：在大型项目中。频繁的依赖收集与触发导致性能波动，特别是深层嵌套对象时开发者常抱怨页面卡顿。

二、Vue2 响应式：Object.defineProperty

. 原理介绍

Object.defineProperty 为对象的单个属性劫持 get/set

• get组件渲染、计算属性、watch 读取数据时触发。收集当前正在执行的渲染函数/副作用函数，存入Dep。
• set数据被赋值修改时触发。Dep 遍历内部所有依赖，执行更新函数，刷新视图。

. 基础简易模拟

// 依赖收集容器
class Dep {
constructor {
this.subs =;// 存放依赖
}
// 收集依赖
addSub {
this.subs.push;}
// 派发更新
notify {
this.subs.forEach);}
}
// 观察者：数据劫持
function observe {
if return;Object.keys.forEach(key => {
let val = obj;const dep = new Dep;Object.defineProperty(obj,key。{
get {
// 有正在执行的 watcher 则收集依赖
Dep.target && dep.addSub;return val，},set {
if return;val = newVal;observe，// 新值递归劫持
dep.notify;// 通知更新
}
});observe，// 递归深层劫持对象
});怎么说呢，}
// 渲染 Watcher：视图更新函数
class Watcher {
constructor {
Dep.target = this;this.updateFn = fn;this.update，Dep.target = null;}
update {
this.updateFn;}
}
// 测试
const data = { name: "vue2" };observe，new Watcher => console.log);data.name = "更新了";

. Vue2 致命缺陷

1. 无法监听对象新增、删除属性：defineProperty只能劫持初始化存在的属性。新增（this.obj.a = …)、删除（delete this.obj.a)均不会触发 set。需要使用 Vue.set / this.$set$delete
2. 数组监听缺陷：无法监听数组下标修改和 length 改变，只能重写七个数组方法来拦截。说起来，
3. 递归遍历性能差：初始化时递归遍历对象所有层级。深层大对象初始化开销巨大。

使用者痛点实例：在实际项目里经常需要手动调用 $set/$delete 来保证响应式。这让代码充斥大量样板，维护成本高。

三、Vue3 响应式：Proxy + Reflect

. 原理介绍

new Proxy 能够代理整个对象，而非单个属性

• # 拦截范围：#读取、修改、新增、删除、下标、length 等全部操作均可捕获。
• # 搭配 Reflect：#使用原生 API 完成实际读写，确保 this 指向和返回值一致。
• # 保持概念不变：#仍然使用 Dep 收集依赖、effect 副作用函数来完成“读→收集 → 写→触发”。

. 简易模拟

class Dep {
constructor {
this.effects = new Set;}
collect { activeEffect && this.effects.add;}
trigger { this.effects.forEach);话说回来，}
}
let activeEffect = null;// 副作用函数：视图更新逻辑
function effect {
activeEffect = fn;fn，// 首次执行以收集依赖
activeEffect = null;
}
// WeakMap 用于存储 target -> key -> dep 的映射关系
const targetMap = new WeakMap;function getDep {
let depsMap = targetMap.get;if targetMap.set));let dep = depsMap.get;if depsMap.set));return dep，}
// 数据劫持主要
function reactive {
return new Proxy(target,{
get {
const dep = getDep;dep.collect，// 收集依赖
return Reflect.get;// 正常读取值
},set {
const dep = getDep;const result = Reflect.set;dep.trigger，// 派发更新
return result;},deleteProperty {
const dep = getDep;const result = Reflect.deleteProperty;dep.trigger，// 删除也要通知视图
return result;}
})，}
// 测试代码
const state = reactive;effect => console.log);state.name = "新版 vue";state.age = 18;// 新增属性可被监听
delete state.name;怎么说呢，// 删除属性一样可被监听

. Proxy 对比 defineProperty 的优势

1. 全覆盖监听：P​roxy 支持属性新增、删除、数组下标与 length 修改等全部操作。不再需要手动调用 $set。
2. 懒劫持：P​roxy 在初始化时只代理外层对象。深层属性只有在访问时才递归代理，大幅降低首屏渲染成本。
3. 数组完美监听：P​roxy 原生拦截数组下标和 length，无需重写七大变异方法。
4. P​roxy 可拦截更多行为。如 has、ownKeys、apply 等共计13种底层操作，为未来特性提供 空间。其实，

使用者痛点缓解：P​roxy 消除了 Vue2 中 “必须用 $set” 的尴尬。使代码更简洁、更符合直觉。

. 小缺点

P​roxy 在 IE 浏览器上不兼容。Vue3 所以直接放弃对 IE 的支持，而 Vue2 为兼容老旧浏览器只能继续使用 defineProperty。

四、完整响应式闭环流程

1. "初始化劫持": 对 data 做 defineProperty 或 Proxy 包装，定义 get/set 拦截入口。老实说，
2. "依赖收集": 渲染阶段执行组件模板 → 数据读取触发 get → 当前渲染函数被加入对应 Dep 中。
3. "派发更新": 数据修改触发 set → 所属 Dep 把所有已收集的渲染函数取出并执行 → DOM 重绘或计算属性重新求值。
4. "异步更新队列": 多次连续修改会进入同一个微任务队列。仅在 nextTick 时统一刷一次 UI，避免不必要的重复渲染。

* 实际开发中经常碰到的问题是“页面出现多次无意义刷新”，了解并正确利用 nextTick 与批量更新机制可以显著提高性能。

五、衍生概念梳理

1. Watcher: Vue2 中负责把渲染逻辑或 computed/watch 回调包装成可被 Dep 管理的观察者实例。
2. Dep: 每个响应式属性对应一个 Dep。用于存放该属性相关联的 Watcher 集合，实现“一对多”的关系。
3. computed: 基于副作用实现惰性求值。仅在其依赖变化且有读取请求时重新计算，并缓存结果。
4. watch: 手动注册的数据变化回调，可选择 immediate / deep 等选项进行细粒度控制。
5. nextTick: 将回调推入微任务队列。在 DOM 更新完成后执行，让开发者可以安全地获取最新 DOM 状态。老实说，

再看要点。

• S​tandardize mental model: read → collect → write → trigger.
• S​witch to Proxy when possible for full coverage and lazy initialization.
• Avoid manual $set/$delete by leveraging Vue‑reactivity’s native proxy support.
• D​eploy nextTick or async queue to batch updates and eliminate UI jitter.
• K​now trade‑off: Proxy ≈ modern browsers;不过，defineProperty ≈ legacy compatibility.