Vue3响应式系统中的get、set与handler

2024-01-04 13:26:54

Vue 3 响应式系统：深入了解 get、set 和 handler

在 Vue 3 中，响应式系统是其核心，它提供了数据和视图之间的双向绑定。这篇文章将深入探讨响应式系统中的三个关键方法：get、set 和 handler，帮助你更好地理解 Vue 3 的响应式机制。

get：获取响应式属性

当访问响应式对象的属性时，Vue 3 会自动调用 get 方法。它负责获取该属性的当前值。get 方法的原型如下：

get(target: object, key: string | symbol): any;

其中：

target：响应式对象
key：属性的名称或符号

set：设置响应式属性

当给响应式对象的属性赋值时，Vue 3 会调用 set 方法来更新该属性的值。set 方法的原型如下：

set(target: object, key: string | symbol, value: any): boolean;

其中：

target：响应式对象
key：属性的名称或符号
value：属性的新值

handler：自定义属性处理

handler 是一个包含各种方法的对象，用于处理响应式对象的属性。当创建一个响应式对象时，可以指定一个 handler 对象，Vue 3 会使用它来处理该对象的属性。handler 对象的原型如下：

interface Handler {
  get?(target: object, key: string | symbol, receiver: object): any;
  set?(target: object, key: string | symbol, value: any, receiver: object): boolean;
  deleteProperty?(target: object, key: string | symbol): boolean;
  has?(target: object, key: string | symbol): boolean;
  ownKeys?(target: object): Array<string | symbol>;
  getOwnPropertyDescriptor?(target: object, key: string | symbol): PropertyDescriptor | undefined;
  defineProperty?(target: object, key: string | symbol, attributes: PropertyDescriptor): boolean;
  preventExtensions?(target: object): boolean;
  isExtensible?(target: object): boolean;
  setPrototypeOf?(target: object, proto: object | null): boolean;
  getPrototypeOf?(target: object): object | null;
}

通过自定义 handler 对象，你可以控制响应式对象的属性访问和修改行为。

使用示例

下面是一个使用 get 和 set 方法的简单示例：

const person = Vue.reactive({
  name: "Alice",
  age: 25
});

console.log(person.name); // "Alice"
person.age = 26;
console.log(person.age); // 26

你可以使用 handler 对象来自定义属性的访问和修改行为：

const handler = {
  get(target, key) {
    if (key === "name") {
      return target[key].toUpperCase();
    }
    return target[key];
  },
  set(target, key, value) {
    if (key === "age" && value < 0) {
      throw new Error("Age cannot be negative");
    }
    target[key] = value;
  }
};

const person = Vue.reactive({
  name: "Bob",
  age: 30
}, handler);

console.log(person.name); // "BOB"
person.age = 25;
console.log(person.age); // 25

try {
  person.age = -1;
} catch (error) {
  console.log(error.message); // "Age cannot be negative"
}