大家好，我是 V 哥。
Vue 2 和 Vue 3 在响应式原理上存在显著差异，下面为你详细介绍。
如果你是前端开发，V 哥建议抓紧入坑鸿蒙，2025年鸿蒙趋势将引领国产化替代的新征程，大量内推岗位等你来拿。
推荐一本鸿蒙 NEXT 书《鸿蒙 HarmonyOS 开发之路》卷1，可以让你少走弯路。
Vue 2 响应式原理
Vue 2 使用 Object.defineProperty() 方法来实现响应式系统。该方法可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
实现原理
- 核心方法：
Object.defineProperty()劫持对象属性的getter和setter。当一个 Vue 实例创建时，Vue 会遍历data选项中的所有属性，使用Object.defineProperty()将这些属性转换为getter/setter。 - 依赖收集：当访问这些属性时，触发
getter，进行依赖收集；当属性值发生变化时，触发setter，通知所有依赖更新。
示例代码
// 模拟 Vue 2 的响应式原理
function defineReactive(obj, key, val) {
// 存储依赖的数组
const dep = [];
Object.defineProperty(obj, key, {
get() {
// 收集依赖
if (Dep.target) {
dep.push(Dep.target);
}
return val;
},
set(newVal) {
if (newVal !== val) {
val = newVal;
// 通知所有依赖更新
dep.forEach(watcher => watcher.update());
}
}
});
}
// 模拟 Watcher
class Watcher {
constructor() {
Dep.target = this;
}
update() {
console.log('数据更新，触发视图更新');
}
}
// 全局变量，用于存储当前正在收集依赖的 Watcher
Dep.target = null;
// 创建一个对象
const obj = {
};
// 使对象的属性变为响应式
defineReactive(obj, 'message', 'Hello, Vue 2!');
// 创建一个 Watcher
new Watcher();
// 访问属性，触发 getter 进行依赖收集
console.log(obj.message);
// 修改属性，触发 setter 通知依赖更新
obj.message = 'New message';
AI 代码解读
局限性
- 无法检测对象属性的添加和删除：因为
Object.defineProperty()是对对象已有属性进行劫持，新增或删除属性时无法自动触发响应式更新。 - 无法检测数组的某些变化：Vue 2 对数组的
push、pop等方法进行了重写，但对于通过索引直接修改数组元素或修改数组长度的操作无法检测。
Vue 3 响应式原理
Vue 3 使用 ES6 的 Proxy 对象来实现响应式系统。Proxy 对象用于创建一个对象的代理，从而可以对该对象的基本操作进行拦截和自定义。
实现原理
- 核心方法：
Proxy可以拦截对象的各种操作，包括属性读取、属性设置、属性删除等。Vue 3 通过创建一个Proxy对象来代理data对象，当对代理对象进行操作时，会触发相应的拦截器。 - 依赖收集和更新：在拦截器中进行依赖收集和更新通知，实现响应式。
示例代码
// 模拟 Vue 3 的响应式原理
function reactive(target) {
// 存储依赖的 WeakMap
const targetMap = new WeakMap();
function track(target, key) {
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()));
}
if (activeEffect) {
dep.add(activeEffect);
}
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const dep = depsMap.get(key);
if (dep) {
dep.forEach(effect => effect());
}
}
return new Proxy(target, {
get(target, key) {
// 收集依赖
track(target, key);
return target[key];
},
set(target, key, value) {
target[key] = value;
// 通知依赖更新
trigger(target, key);
return true;
}
});
}
// 模拟 effect
let activeEffect;
function effect(fn) {
activeEffect = fn;
fn();
activeEffect = null;
}
// 创建一个对象
const obj = {
message: 'Hello, Vue 3!' };
// 使对象变为响应式
const reactiveObj = reactive(obj);
// 创建一个 effect
effect(() => {
console.log(reactiveObj.message);
});
// 修改属性，触发响应式更新
reactiveObj.message = 'New message';
AI 代码解读
优势
- 可以检测对象属性的添加和删除：
Proxy可以拦截对象属性的添加和删除操作，从而实现响应式更新。 - 可以检测数组的所有变化：
Proxy可以拦截数组的所有操作，包括通过索引直接修改数组元素和修改数组长度。
所以，Vue 3 的响应式原理相比 Vue 2 更加完善和强大，解决了 Vue 2 中存在的一些局限性。
Vue 2 和 Vue 3 的响应式原理对性能有什么影响？
Vue 2 和 Vue 3 的响应式原理在多个方面对性能产生不同的影响，下面从初始化性能、更新性能、内存占用等方面进行详细分析。
初始化性能
Vue 2
- 原理特点：Vue 2 使用
Object.defineProperty()对data选项中的每个属性进行递归遍历，并将其转换为getter/setter。这意味着在初始化时，需要对对象的所有属性进行处理，对于嵌套层级较深的对象，会带来较大的性能开销。 - 性能影响：当数据对象非常大且嵌套层级很深时，初始化过程会比较耗时，因为需要为每个属性都调用
Object.defineProperty()方法。例如，一个包含大量嵌套对象和数组的复杂数据结构，初始化时会显著增加 CPU 的计算负担。
Vue 3
- 原理特点：Vue 3 使用
Proxy对象来实现响应式。Proxy是对整个对象进行代理，不需要对每个属性进行递归处理。在初始化时，只需要创建一个Proxy对象，当访问对象的属性时才会进行依赖收集。 - 性能影响：相比 Vue 2，Vue 3 的初始化性能有明显提升，尤其是对于大型数据对象。因为它避免了对所有属性的递归处理，减少了初始化时的计算量。
更新性能
Vue 2
- 原理特点：当修改 Vue 2 中响应式对象的属性时，会触发
setter方法，通知所有依赖更新。但由于Object.defineProperty()的局限性，对于对象属性的添加和删除以及数组的某些操作（如通过索引直接修改数组元素），无法自动检测，需要使用特殊的方法（如Vue.set、Vue.delete）来触发更新。 - 性能影响：在更新操作时，如果使用不当，可能会导致不必要的更新或无法及时更新。而且，由于依赖收集是基于属性的
getter和setter，对于嵌套层级较深的对象，更新时可能需要层层触发setter，性能开销较大。
Vue 3
- 原理特点：Vue 3 的
Proxy可以拦截对象的各种操作，包括属性的添加、删除和数组的所有操作。当修改响应式对象时，Proxy会立即捕获到变化，并通知所有依赖更新。 - 性能影响：Vue 3 的更新性能更加稳定和高效。它能够更准确地检测到对象的变化，避免了 Vue 2 中因操作不当导致的更新问题。同时，由于
Proxy的拦截机制，更新操作的响应速度更快，减少了不必要的性能损耗。
内存占用
Vue 2
- 原理特点：由于 Vue 2 需要为每个属性创建
getter/setter，并且需要维护一个依赖收集系统，这会增加额外的内存开销。对于大型数据对象，每个属性都有对应的getter/setter和依赖信息，会占用较多的内存空间。 - 性能影响：在处理大量数据时，Vue 2 的内存占用可能会成为性能瓶颈，尤其是在内存有限的设备上，可能会导致页面卡顿或崩溃。
Vue 3
- 原理特点：Vue 3 的
Proxy只需要为整个对象创建一个代理，不需要为每个属性添加额外的getter/setter，因此内存占用相对较少。同时，Vue 3 的依赖收集系统也进行了优化，减少了不必要的内存开销。 - 性能影响：Vue 3 在内存使用上更加高效，能够更好地处理大型数据对象，减少了因内存占用过高导致的性能问题。
所以我们可以看到，Vue 3 的响应式原理在初始化性能、更新性能和内存占用方面都优于 Vue 2，尤其是在处理大型数据对象时，性能提升更为明显。
最后
如果你还在老项目中使用 Vue2，V 哥强烈建议更新成 Vue3，老项目的兼容性也许会给你带来一些麻烦，请相信，相比Vue3带来的性能提升，会大大提高系统的用户体验，不防试试。关注威哥爱编程，全栈开发就你行。
