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

Vue2和Vue3响应式的基本实现

news 来源：原创 2025/6/30 14:57:07

简介

在 Vue 框架中，数据的响应式是其核心特性之一。当页面数据发生变化时，我们希望界面能自动更新，而不是手动操作 DOM。这就需要对数据进行监听，并在数据变更时触发 UI 重新渲染。
Vue2 和 Vue3 在实现响应式的方式上有所不同，Vue2 主要依赖 Object.defineProperty，而 Vue3 则引入了 Proxy，大大优化了响应式系统的性能和灵活性。它们都是通过函数来封装响应式对象，方便读取或更新数据时能够进行其他的操作。

Vue2 响应式

Vue2 使用 Object.defineProperty 来拦截对象属性的访问和修改，从而实现响应式。

const obj = {a: 1,b: 2,c: {x: 66,y: 2,}
}function isObject(v) {return typeof v === 'object' && v !== null;
}function observe(obj) {for (const k in obj) {let v = obj[k];if (isObject(v)) observe(v); // 递归遍历Object.defineProperty(obj, k, {get() {console.log(`读取${k}, 值${v}`);return v;},set(newVal) {v = newVal;console.log(`更新${k}, 值${v}`);}});}
}observe(obj);obj.a;
obj.a = 101;
obj.c.x;
obj.c.x = 166;

在这里插入图片描述

Vue2 响应式的局限性

需要遍历对象的每个属性，性能较低。
不能检测到新增或删除的属性。
需要手动调用 Vue.set() 以确保新属性的响应式。

Vue3 响应式

Vue3 使用 Proxy 实现响应式，可以直接监听整个对象，而不是逐个属性。

const obj = {a: 1,b: 2,c: {x: 1,y: 2,}
};function isObject(v) {return typeof v === 'object' && v !== null;
}function reactive(target) {return new Proxy(target, {get(target, k) {console.log(`读取: ${k}, 值: ${target[k]}`);// 读取时才递归生成代理if (isObject(target[k])) return reactive(target[k]);return target[k];},set(target, k, newVal) {if (newVal === target[k]) return;console.log(`更新: ${k}, 值${newVal}`);target[k] = newVal;return true;}});
}const proxy = reactive(obj);proxy.a;
proxy.a = 100;
proxy.c.x;

在这里插入图片描述

Vue3 响应式的优点

直接监听整个对象，无需遍历所有属性。
可以检测到属性的新增和删除。
具有更好的性能和更简洁的代码结构。

Vue2 和 Vue3 响应式对比

对比项	Vue2 (`Object.defineProperty`)	Vue3 (`Proxy`)
监听方式	逐个属性拦截	整个对象拦截
深度监听	需要递归处理	访问时自动代理
属性新增删除	需要 `Vue.set()` 处理	可直接监听
数组监听	需要重写数组方法	原生支持
性能	需要遍历所有属性，较低	直接代理整个对象，更高
兼容性	兼容性好，支持 ES5 及以上	需要 ES6 `Proxy` 支持

Vue3 通过 Proxy 解决了 Vue2 的许多缺陷，使得响应式系统更加高效、灵活和简洁。因此，Vue3 的响应式能力远超 Vue2。

目录

简介

Vue2 响应式

Vue2 响应式的局限性

Vue3 响应式

Vue3 响应式的优点

Vue2 和 Vue3 响应式对比

相关文章：