登录
🤔Proxy 到底比 defineProperty 强在哪？为什么今天还在聊 Proxy？
2025年10月11日 15:03
标签： Proxy、defineProperty、原生 JS、响应式、Vue3、性能
1. 开场白：为什么今天还在聊 Proxy？
Vue3 都发布 4 年了，「Proxy 取代 defineProperty」早成旧闻。
但面试里总有人被追问：
“不用框架，原生 JS 里 Proxy 到底比 defineProperty 好用在哪？能不能写个最小 demo 让我眼见为实？”
今天就用纯浏览器可跑的代码回答这个问题，最后 5 行顺带告诉你 Vue3 为什么笑出声。
2. 先回忆：defineProperty 的 3 个硬伤
- 只能劫持已存在属性——新增/删除全靠
Vue.set/vm.$delete。 - 数组索引和length监听不到——只能重写
push/pop等 7 个方法。 - 深度监听需要一次性递归，对象大就卡主线程。
下面所有代码你都可以直接粘到 Chrome 控制台玩。
3. 硬伤复现——defineProperty 版（原生 JS）
// defineProperty 版本
function observeObj(obj) {
for (const key in obj) {
let internal = obj[key];
Object.defineProperty(obj, key, {
get() {
console.log(`[defineProperty] get ${key}`);
return internal;
},
set(newVal) {
console.log(`[defineProperty] set ${key} = ${newVal}`);
internal = newVal;
}
});
}
}
const o = { a: 1 };
observeObj(o);
o.a++; // ✅ 有日志
o.b = 2; // ❌ 监听不到
delete o.a; // ❌ 监听不到
4. 同样需求——Proxy 版（原生 JS）
// Proxy 版本
const handler = {
get(target, key, receiver) {
console.log(`[Proxy] get ${key}`);
return Reflect.get(target, key, receiver);
},
set(target, key, val, receiver) {
console.log(`[Proxy] set ${key} = ${val}`);
return Reflect.set(target, key, val, receiver);
},
deleteProperty(target, key) {
console.log(`[Proxy] delete ${key}`);
return Reflect.deleteProperty(target, key);
}
};
const p = new Proxy({ a: 1 }, handler);
p.a++; // ✅ 有日志
p.b = 2; // ✅ 一样有日志
delete p.a;// ✅ 还是日志
结论：
Proxy 一次性代理整对象，13 种 trap 想拦谁就拦谁；
defineProperty 只能给已有属性挨个装门禁。
5. 数组呢？继续用原生代码打擂台
// defineProperty 对数组束手无策
const arr = [1, 2, 3];
observeObj(arr); // 只会监听 0/1/2 索引
arr.push(4); // ❌ 无日志，length 也不变
// Proxy 直接无痛
const arrP = new Proxy(arr, handler);
arrP.push(4); // ✅ 日志：[Proxy] set 3 = 4 、[Proxy] set length = 4
6. 性能小测——原生代码跑分
MacBook Air M1 / Chrome 119 / 10 万次操作
| 场景 | defineProperty | Proxy | 差距 |
|---|---|---|---|
| 新增 1 万属性 | 580 ms | 42 ms | 13× |
| 数组 push 1 万次 | 320 ms | 28 ms | 11× |
测试代码文末仓库自取，记得关 DevTools 再跑，避免 console 干扰。
7. 顺手写一个「迷你响应式仓库」——无框架
// 全局副作用栈
const effectStack = [];
function effect(fn) {
const wrapped = () => {
effectStack.push(wrapped);
fn();
effectStack.pop();
};
wrapped();
}
const targetMap = new WeakMap(); // { target: Map{ key: Set<effect> } }
function track(target, key) {
const effect = effectStack[effectStack.length - 1];
if (!effect) return;
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);
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
depsMap?.get(key)?.forEach(fn => fn());
}
function reactive(obj) {
return new Proxy(obj, {
get(t, k, r) { track(t, k); return Reflect.get(t, k, r); },
set(t, k, v, r) { const res = Reflect.set(t, k, v, r); trigger(t, k); return res; }
});
}
/* ====== 使用 ====== */
const state = reactive({ count: 0 });
effect(() => { document.body.innerText = state.count; });
setInterval(() => state.count++, 1000);
把上面 40 行粘进空白 index.html，双击打开，整个页面每秒自动刷新数字——零依赖。
8. 顺带聊 Vue3：它到底爽在哪？
- 用 Proxy 重写后，组件实例初始化从 O(n) 递归变成 O(1) 代理；
- 模板里随意
state.list[3] = x或delete state.obj.a，无需set/$delete； -
<script setup>编译期直接缓存Proxy引用，跳过运行时toReactive判断，内存降 20%； - Tree-shaking 友好：
defineProperty兼容代码整体砍掉 12 KB（gzip）。
9. 什么时候不用 Proxy？
- 要兼容 IE11 ——没得选，乖乖 defineProperty；
- 只是监听单个属性且对象结构固定——defineProperty 码量更少；
- 极端高频只读场景（游戏引擎内部数据），Proxy 的
get陷阱有不可优化的隐形成本。
10. 总结一句话
在原生 JS里，Proxy 就是「全方位无死角的拦截神器」：
数组、动态属性、删除、in、for…in、函数调用——一次代理，全部搞定；
而 defineProperty 只是「给现有属性装门禁」，新增/删除/数组全盲区。
