Explore lo más destacado en Vue3.0: ¡proxy!
Esto elimina muchas limitaciones de la implementación anterior basada en Object.defineProperty en Vue2.
Como "ingeniero de front-end", ¡es necesario que Amway tenga una ola de agentes! !
MDN describe el comportamiento personalizado de los objetos proxy utilizados para definir operaciones básicas (como búsqueda de atributos, asignación, enumeración, llamada de funciones, etc.
La descripción oficial es siempre Es). tan conciso y conciso que es difícil de explicar con claridad. ...
De hecho, la interceptación se proporciona antes de operar el objeto de destino, lo que puede filtrar y reescribir operaciones externas y modificar el comportamiento predeterminado de algunas operaciones, de modo que podamos operar indirectamente el objeto a través del objeto proxy. del objeto operativo, y en lugar de operar directamente el objeto mismo para lograr el propósito esperado~
¿Qué? ¿Aún no lo has dejado claro? Echemos un vistazo a un ejemplo para verlo claramente~
En el ejemplo anterior, predefinimos un objeto obj, generamos un objeto Proxyobj a través del constructor proxy y modificamos su conjunto (escribir) y obtener (leer). ) comportamiento.
Cuando accedemos a la propiedad original en el objeto, devolveremos el valor correspondiente en la propiedad original. Si intentamos acceder a una propiedad que no existe, devolveremos 0, es decir, cuando accedamos. acceda a proxyObj.a, el objeto original tiene la propiedad A, por lo que devolveremos 1, y cuando intentemos acceder a la propiedad B que no existe en el objeto, no devolveremos indefinido. En cambio, devuelve 0 y cuando intentamos establecer un nuevo valor de propiedad, siempre devuelve 888. Entonces, incluso si asignamos un valor de 666 a proxyObj.a, no tendrá efecto y aún así se devolverá 888.
La sintaxis del proxy proporcionada por ES6 es muy simple y su uso es el siguiente:
let proxy = new Proxy (destino, controlador);
El objetivo del parámetro es proxy El objeto de destino del contenedor (puede ser cualquier tipo de objeto, incluida una matriz nativa, una función o incluso otro Proxy. El controlador de parámetros también es un objeto y sus propiedades son funciones que definen el comportamiento). del proxy al realizar operaciones, es decir, comportamiento personalizado.
El uso básico del proxy es el mismo que el anterior, excepto que el objeto controlador es diferente. El controlador puede ser un objeto vacío {}, lo que significa que la operación de proxy es la operación de destino, es decir:
Sin embargo, debe tenerse en cuenta que el controlador no se puede establecer en nulo, se producirá un error. lanzado: no se pueden utilizar objetos que no sean objetos. ¡Cree un agente como objetivo o controlador!
Si Proxy funciona, no podemos operar el objeto del objeto original, es decir, el objeto de destino (el objeto de obj en el ejemplo anterior). Debemos operar la instancia de proxy (el objeto de proxyObj en). el ejemplo anterior), de lo contrario no se puede alcanzar el efecto esperado. En el ejemplo original, después de configurar el método get, intentamos continuar leyendo una propiedad b inexistente del objeto original obj, y el resultado aún devolvió indefinido:
Para operación de interceptación configurable pero no configurada , los resultados del procesamiento del objeto proxy también actuarán sobre el objeto de destino original. ¿Cómo entenderlo? O en el ejemplo inicial, redefinimos el método set, todas las configuraciones de atributos se devuelven a 888 y un atributo especial no se intercepta ni procesa (aquí se refiere al atributo A de Obj), por lo que proxyObj.a = 666 El resultado de La operación también se aplicará al objeto de destino original (objeto obj), por lo que el valor de A del objeto obj también será 888.
Actualmente, el proxy en ES6 proporciona 13 operaciones de proxy. Aquí resumiré algunas API de uso común.
Los estudiantes que quieran conocer otros métodos pueden consultarlo en el sitio web oficial:
- handler.get (destino, atributo, receptor)
Se utiliza para interceptar la operación de leer atributos de objetos. objetivo se refiere al objeto de destino, propiedad es el nombre de la propiedad obtenida y receptor es el proxy o un objeto que hereda el proxy, generalmente una instancia de proxy.
Interceptamos la operación de lectura y obtención de un objeto vacío. Al obtener las propiedades internas, se generará get ${prop} y se devolverá 10;
La propiedad a del. El objeto proxy está determinado por el objeto proxy Proporcionado, por lo que el receptor apunta al objeto proxy, por lo que proxy.a === proxy devuelve verdadero.
Tenga en cuenta que si el atributo de destino al que se accede no se puede escribir ni configurar, el valor de retorno debe ser el mismo que el atributo de destino, es decir, no se puede modificar; de lo contrario, se generará una excepción ~
No se puede escribir ni configurar la propiedad A en el objeto obj anterior. Creamos una instancia de Proxy a través de proxy e interceptamos su operación de obtención. Cuando generamos proxy.a, se generará una excepción. En este momento, si modificamos el valor de retorno del método get para que sea el mismo que el valor del atributo de destino, es decir, 10,
Se pueden eliminar las excepciones~
- handler.set(objetivo, atributo, valor, receptor)
Se utiliza para interceptar la operación de configuración de valores de atributos. En comparación con el método get, el parámetro tiene un valor más, que es el valor del atributo que se establecerá ~
En modo estricto, el método set debe devolver un valor booleano. Si se devuelve verdadero, significa que la propiedad se estableció correctamente. Si devuelve falso y la operación de configuración de la propiedad falla, se generará un TypeError.
Arriba, al modificar el método set, limitamos la asignación del atributo de recuento en el objeto de destino. Requerimos que el valor asignado al atributo de recuento sea un dato de tipo numérico. Si no, se devuelve un error. La variable no es un número entero. La primera vez que asignamos la cadena '10' para contar, se produjo una excepción. La segunda vez que la asignamos al número 10, la impresión fue exitosa. ¡Así que puedes usar el método establecido para realizar alguna verificación de datos!
De manera similar, si el atributo de destino no se puede escribir ni configurar, su valor no se puede cambiar, es decir, la asignación no es válida, como se muestra a continuación:
Establecemos el atributo de recuento en el objeto obj anterior No se puede modificar. El valor predeterminado es 10, por lo que incluso si el valor se asigna a 20, ¡el resultado no cambiará!
- handler.apply(target, thisArg, argumentsList)
Utilizado para interceptar llamadas a funciones, * * * tiene tres parámetros, a saber, el objeto de destino (función) y el contexto al llamar El objeto thisArg y la matriz de parámetros argumentsList al llamar. Este método puede devolver cualquier valor.
El objetivo debe ser un objeto de función; de lo contrario, se generará un TypeError.
De hecho, aplicar también interceptará Function.prototype.apply() y Function.prototype.call() de el objeto de destino y la operación Reflect.apply(), de la siguiente manera:
- handler.construct(target, argumentsList, newTarget)
Esta construcción se utiliza para interceptar el nuevo operador . Para que el nuevo operador surta efecto en el objeto proxy generado, el objeto de destino utilizado para inicializar el proxy debe tener un método interno [[Construct]] y recibe tres parámetros, a saber, el objetivo del objeto de destino y la lista de parámetros del constructor; argumentsList y el objeto El constructor utilizado por el nuevo comando cuando se crea una instancia por primera vez, que es P en el siguiente ejemplo.
Además, el método debe devolver un objeto; de lo contrario, se generará una excepción.
- handler.has(objetivo, atributo)
El método has puede considerarse como un gancho para la operación. Este método entra en vigor cuando determinamos si un objeto tiene un determinado atributo. Las operaciones típicas son en.
El método se cambia para recibir dos parámetros: el objeto de destino y la propiedad a verificar, y devuelve un valor booleano.
En el ejemplo anterior, utilizamos el método has para ocultar atributos privados cuyos atributos comienzan con un guión bajo _, de modo que se devuelva falso durante el juicio, de modo que el operador In no los descubra ~
Cabe señalar que si una propiedad del objeto de destino en sí no se puede configurar, el proxy no puede ocultarla; si el objeto de destino es un objeto no extensible, el proxy no puede ocultarla; ; de lo contrario, se generará un TypeError.
La introducción anterior es una comprensión preliminar del proxy, por lo que podemos implementar manualmente un enlace de datos bidireccional muy simple a través del proxy (consulte Object.defineProperty() al final de mi artículo anterior Método de implementación )~
Depende principalmente de la implementación de la función, así que simplemente agité mi mano sobre el diseño ~
La estructura de la página es la siguiente:
Depende principalmente de la parte lógica:
Arriba creamos una instancia de myText a través del proxy y actualizamos los cambios de vista interceptando el método set del atributo Text en myText, logrando así datos bidireccionales muy simples. vinculante ~
Dicho esto, Proxy finalmente comenzó. Aunque su sintaxis es sencilla, conseguir todo su valor no es fácil. Sumado a la compatibilidad de su propio agente, no se utilizan muchos escenarios en el desarrollo de nuestra aplicación real, pero eso no significa que no sea práctico. En mi opinión, se puede utilizar para procesamiento secundario de datos, verificación de legalidad de datos e incluso proxy funcional, lo cual es más valioso.
Además, Vue 3.0 está listo para ser lanzado, ¿aún no quieres dejar que aprenda?
¡Vamos!