2026-03-13

Proxy

Proxy 对象

Proxy 对象是 ECMAScript 6 (ES6) 引入的一种新型对象，它能够拦截和修改对对象的基本操作，如属性访问、赋值和函数调用。以下是 Proxy 对象的一些关键特性和用法：

基本语法：

const target = {};
const handler = {
    get(target, prop, receiver) {
        // 处理 get 操作
        console.log(`Getting ${prop}`);
        return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
        // 处理 set 操作
        console.log(`Setting ${prop} to ${value}`);
        return Reflect.set(target, prop, value, receiver);
    }
};
const proxy = new Proxy(target, handler);

在这个示例中，我们可以看到 `Proxy` 拦截了 `get` 和 `set` 操作，并在控制台中输出了相关的信息。

拦截操作： Proxy 可以拦截对象的各种操作，包括但不限于属性访问、赋值、枚举、函数调用等。Handler 对象可以包含多个方法，例如 getPrototypeOf、setPrototypeOf、isExtensible、preventExtensions、getOwnPropertyDescriptor、defineProperty、has、get、set、deleteProperty、ownKeys、apply 和 construct 等。
响应式系统中的应用：在 Vue 3 中，响应式系统的重构使用了 Proxy API，替代了 Vue 2 中的 Object.defineProperty。这一改变提升了性能和可扩展性，使得 Vue 的响应式特性能够处理更多的数据类型。
Vue 3 响应式系统的工作原理：
- 创建响应式对象：在 Vue 3 中，可以通过 reactive API 创建响应式对象。例如：
1
2
3
4
import { reactive } from 'vue';
const state = reactive({
count: 0
});
- 修改响应式数据：当通过组件中的方法来修改数据时，Proxy 能够自动拦截这些变化，并触发视图的重新渲染。
Proxy 的其他应用：除了 Vue 3 之外，还有其他库使用了 Proxy，例如 dob 和 immer。这些库利用 Proxy 对对象进行读写拦截，在读写中做一些额外的判断和操作。
Proxy 对象为 JavaScript 提供了强大的代理功能，使得开发者可以对对象的操作进行更细粒度的控制和拦截。在 Vue 3 中，Proxy 的使用极大地增强了框架的响应式能力和性能。

实例

Proxy 是 JavaScript 中的一个内置对象，用于创建一个对象的代理，从而在访问对象的属性和方法时进行拦截和自定义操作。以下是一些使用 Proxy 的实例：

1. 数据验证

使用 Proxy 可以在设置对象属性时进行数据验证，确保数据的正确性和一致性。

const person = {
  name: '',
  age: 0
};
const personProxy = new Proxy(person, {
  set(target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new Error('Age must be a number');
    }
    if (property === 'name' && typeof value !== 'string') {
      throw new Error('Name must be a string');
    }
    target[property] = value;
    return true;
  }
});
personProxy.name = 'Kimi'; // 正常设置
personProxy.age = 25;      // 正常设置
// personProxy.age = '25'; // 抛出错误：Age must be a number

2. 日志记录

通过 Proxy 可以在访问对象属性或方法时自动记录日志，方便调试和监控。

const obj = {
  a: 1,
  b: 2
};
const loggingProxy = new Proxy(obj, {
  get(target, property) {
    console.log(`Accessing property: ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting property: ${property} to ${value}`);
    target[property] = value;
    return true;
  }
});
console.log(loggingProxy.a); // 输出：Accessing property: a
loggingProxy.b = 3;          // 输出：Setting property: b to 3

3. 实现私有属性

使用 Proxy 可以模拟私有属性的行为，防止外部直接访问对象的某些属性。

const privateObj = {
  _privateData: 'secret',
  publicData: 'public'
};
const privateProxy = new Proxy(privateObj, {
  get(target, property) {
    if (property.startsWith('_')) {
      throw new Error('Cannot access private property');
    }
    return target[property];
  }
});
console.log(privateProxy.publicData); // 输出：public
// console.log(privateProxy._privateData); // 抛出错误：Cannot access private property

4. 模拟数组

通过 Proxy 可以创建一个类似数组的对象，并在访问数组元素时进行自定义操作。

const arrayLike = new Proxy({}, {
  get(target, property) {
    if (property === 'length') {
      return Object.keys(target).length;
    }
    return target[property];
  },
  set(target, property, value) {
    target[property] = value;
    return true;
  }
});
arrayLike[0] = 'a';
arrayLike[1] = 'b';
console.log(arrayLike.length); // 输出：2

5. 惰性加载

使用 Proxy 可以实现对象的惰性加载，仅在实际访问属性时才加载数据。

const lazyData = {
  data: null
};
const lazyProxy = new Proxy(lazyData, {
  get(target, property) {
    if (property === 'data' && target.data === null) {
      console.log('Loading data...');
      target.data = { name: 'Kimi', age: 25 };
    }
    return target[property];
  }
});
console.log(lazyProxy.data); // 输出：Loading data... { name: 'Kimi', age: 25 }

这些实例展示了 Proxy 在不同场景下的应用，通过拦截和自定义对象的访问行为，可以实现更灵活和强大的功能.