大白话Vue 3 的响应式系统（Proxy）相比 Vue 2 的 Object.defineProperty 有哪些优势？
前端小伙伴们，在使用Vue 2开发项目时，有没有遇到过这些让人头大的问题？明明修改了数据，页面却没有更新；为了让新增的属性也有响应式效果，不得不调用 Vue.set；深层嵌套的对象，必须手动递归才能实现响应式监听……这些痛点，Vue 3的响应式系统统统帮你解决啦！今天咱们就来唠唠Vue 3的响应式系统（Proxy）相比Vue 2的Object.defineProperty到底强在哪里，让你开发效率直接起飞！
一、痛点场景：Vue 2响应式系统的“坑”
场景一：新增/删除属性不更新
在Vue 2项目中，当我们给对象新增一个属性或者删除一个属性时，视图不会自动更新。比如这样的代码：
export default {
data() {
return {
user: {
name: '张三'
}
}
},
methods: {
addAge() {
// 新增age属性
this.user.age = 25; // 视图不会更新！
}
}
}
这是因为Vue 2的响应式系统是基于Object.defineProperty实现的，它只能劫持对象已有的属性，对于新增的属性无能为力。要解决这个问题，必须使用 Vue.set 方法：
this.$set(this.user, 'age', 25); // 这样视图才会更新
不仅代码繁琐，还容易忘记，简直是开发中的一大痛点！
场景二：深层嵌套对象性能问题
当处理深层嵌套的对象时，Vue 2需要递归遍历所有属性，将它们都转换为getter/setter，这在对象结构复杂时会带来性能问题。例如：
export default {
data() {
return {
deepObject: {
level1: {
level2: {
value: '深层嵌套值'
}
}
}
}
}
}
Vue 2会递归遍历 deepObject 的所有层级，为每个属性都创建getter/setter。如果对象层级很深或者数据量很大，初始化时的性能开销就会非常大。
场景三：数组变异方法限制
Vue 2对数组的响应式处理也有一些限制。虽然Vue 2重写了数组的一些变异方法（如push、pop、splice等），但对于通过索引直接修改数组元素的情况，却无法检测到变化。比如：
export default {
data() {
return {
list: ['a', 'b', 'c']
}
},
methods: {
updateItem() {
this.list[0] = 'd'; // 视图不会更新！
}
}
}
要让这种修改生效，必须使用Vue 2提供的特殊方法：
this.list.splice(0, 1, 'd'); // 这样视图才会更新
这不仅增加了开发成本，还容易让代码变得复杂难懂。
二、Vue 2与Vue 3响应式系统的本质区别
Vue 2的响应式原理（Object.defineProperty）
Vue 2的响应式系统是基于ES5的Object.defineProperty()方法实现的。当一个Vue实例创建时，Vue会遍历data选项中的所有属性，使用Object.defineProperty()将这些属性转换为getter/setter。这样，当这些属性的值发生变化时，Vue就能检测到并更新与之绑定的DOM元素。
举个简单的例子：
function defineReactive(obj, key, val) {
// 递归处理嵌套对象
if (typeof val === 'object') {
observe(val);
}
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
console.log(`获取${key}的值`);
// 依赖收集
return val;
},
set(newVal) {
if (val === newVal) {
return;
}
console.log(`设置${key}的值为${newVal}`);
val = newVal;
// 触发更新
update();
}
});
}
function observe(obj) {
if (typeof obj!== 'object' || obj === null) {
return;
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key]);
});
}
这种实现方式有几个明显的缺点：
- 无法检测对象属性的新增或删除，因为Object.defineProperty只能劫持对象已有的属性。
- 对于数组，只能劫持特定的变异方法，无法劫持通过索引修改数组元素的操作。
- 对于深层嵌套的对象，需要递归遍历所有属性，性能开销较大。
Vue 3的响应式原理（Proxy）
Vue 3使用ES6的Proxy对象来实现响应式系统。Proxy是一种元编程特性，它可以拦截并自定义对一个对象的基本操作，比如属性查找、赋值、枚举、函数调用等。
Vue 3的响应式系统核心代码简化后如下：
function reactive(target) {
// 创建Proxy代理对象
return new Proxy(target, {
get(target, key, receiver) {
console.log(`获取${key}的值`);
// 依赖收集
track(target, key);
// 获取属性值，如果是对象，递归创建响应式代理
const value = Reflect.get(target, key, receiver);
if (typeof value === 'object' && value!== null) {
return reactive(value);
}
return value;
},
set(target, key, value, receiver) {
console.log(`设置${key}的值为${value}`);
// 设置属性值
const oldValue = Reflect.get(target, key, receiver);
const result = Reflect.set(target, key, value, receiver);
// 如果值发生了变化，触发更新
if (oldValue!== value) {
trigger(target, key);
}
return result;
},
deleteProperty(target, key) {
console.log(`删除${key}属性`);
// 删除属性
const result = Reflect.deleteProperty(target, key);
// 触发更新
if (result) {
trigger(target, key);
}
return result;
}
});
}
相比Object.defineProperty，Proxy有以下优势：
- 可以拦截对象的所有基本操作，包括属性的新增和删除，无需特殊处理。
- 可以直接监听数组的各种操作，包括通过索引修改数组元素。
- 采用懒代理模式，只有在访问嵌套对象时才会为其创建响应式代理，避免了递归遍历带来的性能开销。
三、Vue 2与Vue 3响应式系统对比
Vue 2实现响应式的代码示例
// Vue 2中实现响应式的方式
export default {
data() {
return {
user: {
name: '李四',
age: 30
},
list: ['apple', 'banana']
}
},
methods: {
addProperty() {
// Vue 2中新增属性必须使用Vue.set
this.$set(this.user, 'address', '北京市');
},
updateArray() {
// Vue 2中通过索引修改数组元素不会触发更新
// 必须使用splice方法
this.list.splice(0, 1, 'orange');
}
}
}
Vue 3实现响应式的代码示例
// Vue 3中实现响应式的方式
import { reactive, ref } from 'vue';
export default {
setup() {
// 使用reactive创建响应式对象
const user = reactive({
name: '李四',
age: 30
});
// 使用ref创建响应式变量
const list = ref(['apple', 'banana']);
const addProperty = () => {
// Vue 3中可以直接新增属性，自动具有响应式
user.address = '北京市';
}
const updateArray = () => {
// Vue 3中可以直接通过索引修改数组元素
list.value[0] = 'orange';
}
return {
user,
list,
addProperty,
updateArray
}
}
}
从这两个示例可以明显看出，Vue 3的响应式系统使用起来更加简洁、直观，减少了很多特殊处理的代码。
四、对比效果：Vue 3 vs Vue 2 响应式系统
| 对比项 | Vue 2 (Object.defineProperty) | Vue 3 (Proxy) |
|---|---|---|
| 新增/删除属性支持 | 需要使用 Vue.set/Vue.delete 方法才能触发更新 | 可以直接检测到属性的新增和删除，自动更新视图 |
| 数组操作支持 | 只能劫持部分变异方法，通过索引修改元素需要特殊处理 | 可以劫持所有数组操作，包括通过索引修改元素 |
| 深层嵌套对象处理 | 初始化时递归遍历所有属性，性能开销大 | 采用懒代理模式，访问时才创建代理，性能更优 |
| Symbol类型支持 | 不支持监听Symbol类型的属性 | 支持监听Symbol类型的属性 |
| 代码简洁性 | 需要编写额外代码处理特殊情况 | 无需特殊处理，代码更简洁 |
五、面试回答方法：让面试官对你刮目相看
面试时被问到“Vue 3的响应式系统相比Vue 2有哪些优势”，可以这样回答：
“面试官您好！Vue 3的响应式系统相比Vue 2主要有以下几个优势：
第一，Vue 3使用Proxy代替了Object.defineProperty，能直接监听对象属性的新增和删除。在Vue 2里，新增属性得用Vue.set方法，不然视图不会更新，而Vue 3直接新增属性就行，特别方便。
第二，Vue 3对数组的支持更全面。Vue 2只能监听数组的一部分变异方法，像通过索引改数组元素就监听不到，得用splice方法；Vue 3直接就能监听所有数组操作，代码写起来更顺畅。
第三，性能更好。Vue 2处理深层嵌套对象时，一上来就得递归遍历所有属性，对象特别复杂时性能就很差；Vue 3采用懒代理模式，只有访问到嵌套对象时才会为它创建代理，省了不少性能开销。
第四，Vue 3还支持监听Symbol类型的属性，功能更强大了。
总的来说，Vue 3的响应式系统用起来更简单、更高效，开发体验也更好。”
这样回答既全面又通俗易懂，还结合了实际开发中的痛点，能让面试官觉得你不仅懂理论，还有实践经验。
六、总结：Vue 3响应式系统的核心优势
通过以上分析，我们可以总结出Vue 3响应式系统相比Vue 2的核心优势：
- 更全面的监听能力：能直接监听对象属性的新增和删除，以及数组的各种操作，无需特殊处理。
- 更好的性能表现：采用懒代理模式，避免了对深层嵌套对象的递归遍历，提高了初始化性能。
- 更简洁的代码：减少了如
Vue.set这样的特殊方法，让代码更加简洁、直观，降低了开发难度。 - 更完善的特性支持：支持监听Symbol类型的属性，功能更加完善。
这些优势让Vue 3的响应式系统在开发体验和性能上都有了显著提升，也为开发者提供了更强大、更灵活的工具。
七、扩展思考：深入理解Vue 3响应式系统
问题1：Vue 3的响应式系统有什么局限性吗？
虽然Vue 3的响应式系统相比Vue 2有很多优势，但也有一些局限性。例如，它无法监听对象原型链上的属性变化，因为Proxy只能代理对象自身的属性。另外，对于某些特殊对象（如DOM元素、原生对象等），直接使用Proxy可能会有问题，需要特殊处理。
问题2：在Vue 3中，什么时候该用reactive，什么时候该用ref？
reactive 适用于创建复杂的响应式对象，而 ref 主要用于创建简单的响应式值（如基本数据类型）。不过需要注意的是，在Vue 3的setup函数中，返回的ref会自动解包，在模板中可以直接使用，无需加 .value；但在JavaScript代码中，访问和修改ref的值时，还是需要使用 .value。
问题3：Vue 3的响应式系统对Vuex有什么影响？
Vue 3的响应式系统使得状态管理更加灵活，理论上可以减少对Vuex的依赖。因为Vue 3的响应式对象可以直接在组件之间共享，实现简单的状态管理。不过对于复杂的大型项目，Vuex仍然有其价值，比如提供统一的状态管理、时间旅行调试等功能。Vuex 4也已经针对Vue 3进行了优化，更好地支持Vue 3的响应式系统。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
