Vue3 为什么选择 Proxy？看完这篇彻底搞懂 JavaScript 代理模式

大家好，我是小米，前几天陪朋友去逛商场，发生了一件特别有意思的事情，这家商场有个神秘人物，大家都叫他“总管”。

• 顾客想进仓库拿东西？总管先检查。
• 员工想查看库存？总管先登记。
• 供应商送货？总管先验货。
• 甚至老板想修改库存数据？总管还是先过一遍。

我当时突然灵光一闪：这不就是 JavaScript 里的 Proxy（代理模式）吗？

今天我们就通过这个“商场总管”的故事，彻底搞懂 JavaScript 代理模式最常见的几个应用场景：

• 跟踪属性访问
• 隐藏属性
• 属性验证
• 函数与构造函数参数验证
• 数据绑定与可观察对象

看完之后，你会发现 Proxy 根本不是一个冷冰冰的 API，而是一个无所不能的“门卫”。

什么是 Proxy？

在 ES6 之前，如果想监听对象属性变化，其实非常麻烦，而 Proxy 出现之后，JavaScript 给了我们一个超级能力：在对象被访问之前，先经过我。

语法也很简单：

constproxy=newProxy(target, handler);

其中 target 是真实对象，handler 是代理规则，就像这样：

输出：

有人访问了: name

Tom

你会发现，访问的其实是 user，但中间经过了 Proxy，就像商场总管先检查一遍。

第一关：跟踪属性访问

假设你管理一个大型仓库，每次有人查看库存，你都想记录日志，现实中：

• 张三查看库存
• 李四查看库存
• 王五查看库存

程序里也一样。

1、不使用 Proxy

你根本不知道谁访问了什么。

2、使用 Proxy

输出：

访问属性: name

iPhone

访问属性: price

7999

这样所有访问行为都能被记录。

3、实际应用

很多框架内部都会