JS 如何用 Proxy 实现数据劫持和校验？

Question

仓乃文 · Accepted Answer

Proxy 可以拦截对象的基本操作（读取、赋值、删除等），实现数据校验、响应式更新、日志记录等高级功能，是 Vue 3 响应式系统的核心。

属性校验：
```javascript
const user = new Proxy(
  {},
  {
    set(target, prop, value) {
      if (prop === "age" && (typeof value !== "number" || value < 0)) {
        throw new TypeError("age 必须是非负数");
      }
      if (prop === "email" && !value.includes("@")) {
        throw new TypeError("email 格式不正确");
      }
      target[prop] = value;
      return true;
    },
  }
);

user.age = 25;      // 正常
user.age = -1;      // TypeError: age 必须是非负数
user.email = "a@b"; // 正常
user.email = "abc";  // TypeError: email 格式不正确
```

读取拦截 - 私有属性保护：
```javascript
const handler = {
  get(target, prop) {
    if (prop.startsWith("_")) {
      throw new Error("不能访问私有属性");
    }
    return target[prop];
  },
};
```

补充说明：
- Proxy 有 13 种拦截器：get、set、has、deleteProperty、ownKeys 等
- handler 中推荐使用 Reflect 对应方法执行默认行为：Reflect.set(target, prop, value)
- Proxy 不能代理不可扩展对象（如冻结的 DOM 元素）
- Vue 3 用 Proxy 替代了 Vue 2 的 Object.defineProperty，解决了数组监听和新增属性的问题