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

大家好，我是小米，前几天陪朋友去逛商场，发生了一件特别有意思的事情，这家商场有个神秘人物，大家都叫他“总管”。顾客想进仓库拿东西？总管先检查。员工想查看库存？总管先登记。供应商送货？总管先验货。甚至老板想修改库存数据？总管还是先过一遍。我当时突然灵光一闪：这不就是 JavaScript 里的 Proxy（代理模式）吗？今天我们就通过这个“商场总管”的故事，彻底搞懂 JavaScript 代理模式最常见的几个应用场景：跟踪属性访问隐藏属性属性验证函数与构造函数参数验证数据绑定与可观察对象看完之后，你会发现 Proxy 根本不是一个冷冰冰的 API，而是一个无所不能的“门卫”。什么是 Proxy？在 ES6 之前，如果想监听对象属性变化，其实非常麻烦，而 Proxy 出现之后，JavaScript 给了我们一个超级能力：在对象被访问之前，先经过我。语法也很简单：constproxy=newProxy(target, handler);其中 target 是真实对象，handler 是代理规则，就像这样：输出：有人访问了: nameTom你会发现，访问的其实是 user，但中间经过了 Proxy，就像商场总管先检查一遍。第一关：跟踪属性访问假设你管理一个大型仓库，每次有人查看库存，你都想记录日志，现实中：张三查看库存李四查看库存王五查看库存程序里也一样。1、不使用 Proxy你根本不知道谁访问了什么。2、使用 Proxy输出：访问属性: nameiPhone访问属性: price7999这样所有访问行为都能被记录。3、实际应用很多框架内部都会