当前位置：首页 > news >正文

第一节：核心概念高频题-Vue3响应式原理与Vue2的区别

news 来源：原创 2025/4/24 14:24:13

Vue2：基于Object.defineProperty监听对象属性，需手动处理数组方法重写
Vue3：采用Proxy代理实现全量响应式，支持动态新增属性和深层嵌套对象监听

一、实现机制对比

1. Vue2：基于 Object.defineProperty
• 原理：通过递归遍历对象属性，为每个属性添加 getter/setter 拦截。

• 关键代码示例：

function defineReactive(obj, key) {let value = obj[key];Object.defineProperty(obj, key, {get() {console.log(`读取 ${key}:`, value);return value;},set(newVal) {console.log(`设置 ${key}:`, newVal);value = newVal;}});
}// 初始化响应式对象
const data = { a: 1 };
defineReactive(data, 'a');
data.a = 2; // 触发 setter
data.b = 3; // 新增属性，无响应式

• 核心问题：

• 无法检测动态新增/删除的属性：必须通过 Vue.set 或 Vue.delete 处理。

• 数组监听需特殊处理：重写数组方法（如 push、pop）以触发更新。

• 性能开销大：初始化时递归遍历所有属性，嵌套层级深时影响性能。

2. Vue3：基于 Proxy
• 原理：代理整个对象，拦截所有操作（包括动态属性、数组索引）。

• 关键代码示例：

function reactive(obj) {return new Proxy(obj, {get(target, key) {console.log(`读取 ${key}:`, target[key]);const value = target[key];// 惰性代理嵌套对象return (typeof value === 'object' && value !== null) ? reactive(value) : value;},set(target, key, newVal) {console.log(`设置 ${key}:`, newVal);target[key] = newVal;return true;}});
}const data = reactive({ a: 1 });
data.a = 2;     // 触发 setter
data.b = 3;     // 动态新增属性，触发 setter
data.arr = [1, 2];
data.arr.push(3); // 直接操作数组，触发更新

• 核心优势：

• 动态属性支持：自动检测新增/删除的属性。

• 原生数组操作：无需重写方法，直接通过索引或原生方法触发更新。

• 惰性代理：仅在访问嵌套对象时创建代理，减少初始化开销。

二、关键场景对比

1. 动态属性处理
• Vue2：

this.$set(this.obj, 'newKey', 'value'); // 必须使用 Vue.set

• Vue3：

obj.newKey = 'value'; // 直接赋值即可触发响应式

2. 数组操作
• Vue2：

// 必须通过变异方法触发更新
this.list.splice(index, 1, newValue);

• Vue3：

list[index] = newValue; // 直接通过索引修改
list.push(4);           // 直接调用原生 push

3. 深层嵌套对象
• Vue2：初始化时递归遍历所有嵌套对象，转换为响应式。

data() {return {obj: {nested: { a: 1 } // 初始化时递归处理}}
}

• Vue3：按需代理，访问时创建响应式。

const obj = reactive({ nested: null });
obj.nested = { a: 1 }; // 赋值时自动代理嵌套对象

三、性能优化对比

维度	Vue2	Vue3
初始化速度	立即递归所有属性，数据量大时慢	按需代理，首次访问时处理，更快
内存占用	每个属性创建闭包，内存消耗高	共享 Proxy Handler，内存占用更低
更新触发	依赖 Watcher 通知，可能触发冗余更新	基于依赖追踪，精准触发相关组件更新
复杂数据结构	仅支持 Object/Array	支持 Map/Set/WeakMap 等 ES6 数据结构

四、API 设计与底层机制

1. 依赖收集
• Vue2：通过 Dep 类和 Watcher 实现。

class Dep {constructor() {this.subs = [];}depend() {if (Dep.target) this.subs.push(Dep.target);}notify() {this.subs.forEach(watcher => watcher.update());}
}

• Vue3：基于 WeakMap 和 effect 函数。

const targetMap = new WeakMap();
function track(target, key) {const effect = activeEffect;let depsMap = targetMap.get(target);if (!depsMap) targetMap.set(target, (depsMap = new Map()));let dep = depsMap.get(key);if (!dep) depsMap.set(key, (dep = new Set()));dep.add(effect);
}