Introducción: Todo el mundo sabe que Object.defineProperty es el principio del enlace de datos bidireccional en vue 2. Es un método poderoso y de uso común en JavaScript para definir las propiedades de los objetos, lo que nos permite controlar con precisión el comportamiento de las propiedades, incluidas las operaciones de lectura y escritura. tales como entrada y eliminación;
Proxy es el principio del enlace de datos bidireccional en vue3. Es un objeto especial que se usa para crear objetos proxy en ES6. Nos permite interceptar y personalizar la operación del objeto de destino, como acceso a atributos, asignación, llamada de función, etc. Proxy proporciona un mecanismo para establecer interceptores en el objeto de destino para interceptar operaciones en el objeto de destino.
一、Object.defineProperty
1. Object.defineProperty es un método para definir o modificar las propiedades del objeto, que puede controlar con precisión el comportamiento de las propiedades, como escritura, enumeración y configurabilidad; en el método Object.defineProperty, hay tres parámetros obligatorios y un cuarto parámetro opcional .
- obj (obligatorio): el objeto en el que definir la propiedad. Puede ser cualquier objeto JavaScript.
- prop (requerido): El nombre de la propiedad a definir o modificar. Puede ser una cadena que represente el nombre de la propiedad.
- descriptor (requerido): Un objeto que define o modifica las propiedades de la propiedad.
También se pueden incluir los siguientes atributos opcionales :
- configurable (opcional): booleano que indica si el atributo se puede eliminar o modificar. El valor predeterminado es falso.
- enumerable (opcional): booleano que indica si la propiedad se puede enumerar en un bucle for...in. El valor predeterminado es falso.
- valor (opcional): Un valor de cualquier tipo que representa el valor inicial del atributo. El valor predeterminado es indefinido.
- writable (opcional): booleano que indica si se puede modificar el valor de la propiedad. El valor predeterminado es falso.
- get (opcional): función, que representa la función a llamar al obtener el valor de la propiedad.
- set (opcional): función, que representa la función que se llamará al establecer el valor de la propiedad.
2. Gramática básica (ver comentarios para más)
const obj = { name: "小明", age: 18 }
//或者
const obj = { }
//这里不能使用const，const定义的是常量，无法修改;
let demoBute= obj.name;
//使用 Object.defineProperty 定义属性名为 name 的属性
Object.defineProperty(obj, "name", {
//可枚举属性，可以在 for...in 循环中被枚举
enumerable: true,
//可配置属性，可以使用 delete 运算符删除属性
configurable: true,
//获取属性值的函数
get: function () {
console.log("获取，收集依赖");
return demoBute
},
//设置属性值的函数
set: function (value) {
console.log("更新，通知用户");
demoBute = value;
}
})
//修改，触发set函数
obj.name = "小红"
//控制台输出：更新，通知用户
//调用，出发get函数
console.log(obj.name);
//控制台输出：获取，收集依赖
//小明
//多次调用，看下运行顺序，按照调用顺序依次执行(set > get > log)
//只要调用obj都会触发依赖函数
obj.name = "小红"; //set >
console.log(obj.name); //get > log
//控制台输出:
//更新，通知用户
//获取，收集依赖
//小红
3. obtener y configurar
- El rol de la función get es llamar al acceder al valor de la propiedad, no acepta ningún parámetro, pero necesita devolver el valor de la propiedad. En el ejemplo, devolvemos el valor del atributo name a través de return demoBute.
- El rol de la función set debe llamarse cuando se establece el valor del atributo, y acepta un valor de parámetro, que indica el valor del atributo que se va a establecer. En el ejemplo, asignamos directamente el valor del valor modificado a demoBute para implementar la actualización.
4. Asuntos que requieren atención
- Las funciones get y set no se activarán al mismo tiempo, ellas deciden qué función llamar de acuerdo con la operación de lectura o configuración de la propiedad;
- Este método se ejecuta secuencialmente de arriba a abajo según el orden de llamada, es decir, solo se ejecuta la función set si hay una actualización, y solo se ejecuta la función get si no hay actualización.
dos, apoderado
1. El método Proxy es una operación subyacente que le permite interceptar y personalizar objetos. Mediante el uso de Proxy, puede interceptar varias operaciones del objeto, como el acceso a atributos, la asignación de atributos, la llamada de función, etc., y ejecutar comportamientos personalizados cuando se producen estas operaciones; en Proxy, el destino es el objeto de destino que desea representar y handler es un objeto que contiene varias operaciones de intercepción. Cada propiedad en el objeto controlador es un interceptor especial que se usa para interceptar diferentes operaciones.
2. Gramática básica
const target = {...... }
const handler = {
get(target, property, receiver){
//拦截属性的读取操作
},
set(target, property, value, receiver){
//拦截属性
}
}
const proxy = new Proxy(target, handler);3. En el Proxy de ES6, get y set son dos funciones interceptoras de uso común, que se utilizan para interceptar la lectura y asignación de propiedades de objetos. A continuación se describe en detalle el uso y las funciones de estas dos funciones:
（1）、get (objetivo, propiedad, receptor)
- destino: el objeto de destino, es decir, el objeto que se está representando.
- propiedad: El nombre de la propiedad para acceder.
- receptor: el objeto que se llamó originalmente, generalmente un objeto proxy o un objeto que hereda un objeto proxy. - Valor devuelto: Devuelve el valor de la propiedad.
La función de obtención se activa cuando se accede a la propiedad del objeto de destino y se puede utilizar para interceptar la operación de lectura de la propiedad. Puede agregar lógica personalizada dentro de la función de obtención, como registro, verificación de derechos de acceso, etc. Aquí hay un ejemplo:
const target = {
name: "Bob",
age: 18
};
const handler = {
get(target, property, receiver) {
console.log(`正在读取属性：${property}`);
return target[property];
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出：正在读取属性：name，Bob
console.log(proxy.age); // 输出：正在读取属性：age，18Aquí creamos un objeto proxy proxy, al acceder a las propiedades del proxy, se activará la función get y se imprimirá la información de registro correspondiente.
(2), conjunto (objetivo, propiedad, valor, receptor)
- destino : el objeto de destino, es decir, el objeto que se está representando.
- propiedad : El nombre de la propiedad a establecer.
- value : El valor de la propiedad a establecer.
- receptor : el objeto que se llamó originalmente, generalmente un objeto proxy o un objeto que hereda de un objeto proxy. - Valor devuelto: Devuelve un valor booleano que indica si el atributo se ha configurado correctamente.
La función de configuración se activa cuando se asigna un valor al atributo del objeto de destino y se puede utilizar para interceptar la operación de asignación del atributo. Puede agregar lógica personalizada dentro de la función establecida, como verificar la validez de la asignación, registrar registros, etc. Aquí hay un ejemplo:
const target = {
name: "Carl",
age: 20
};
const handler = {
set(target, property, value, receiver) {
console.log(`正在设置属性：${property}，新值为：${value}`);
target[property] = value;
return true;
}
};
const proxy = new Proxy(target, handler);
proxy.age = 30; // 输出：正在设置属性：age，新值为：30
console.log(proxy.age); // 输出：30Aquí, cuando asignamos un valor al atributo de edad del proxy, se activará la función set y se imprimirá la información de registro correspondiente; a través de las funciones de interceptor get y set, puede realizar comportamientos personalizados al leer y asignar atributos, con lo que realizando una manipulación de objetos más flexible y controlable.
(3), ejemplos completos de get y set
const target = {
name: "Alice",
age: 25
};
const handler = {
get(target, property, receiver) {
console.log(`正在读取属性：${property}`);
return target[property];
},
set(target, property, value, receiver) {
console.log(`正在设置属性：${property}，新值为：${value}`);
target[property] = value;
return true;
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出：正在读取属性：name，Alice
proxy.age = 30; // 输出：正在设置属性：age，新值为：30
console.log(proxy.age); // 输出：正在读取属性：age，304. Otros parámetros en el objeto controlador
- get(objetivo, propiedad, receptor): intercepta la operación de lectura de la propiedad.
- set(objetivo, propiedad, valor, receptor): Intercepta la asignación de propiedades.
- apply(target, thisArg, argumentsList): operación de llamada de función de intercepción.
- has(objetivo, propiedad): Intercepta la operación del operador in.
- deleteProperty(objetivo, propiedad): Interceptar eliminación de propiedad
- ......