El núcleo de la implementación del principio de respuesta de Vue2 y Vue3

Introducción a Vue

Vue.js es un marco front-end de JavaScript progresivo de código abierto que se utiliza principalmente para crear interfaces de usuario y aplicaciones de una sola página (SPA). Vue.js se puede integrar fácilmente con otras bibliotecas o proyectos existentes y se considera una forma eficaz de desarrollar aplicaciones web modernas basadas en datos que respondan.

Características principales de Vue.js:

1. Enlace de datos receptivo: Vue.js puede responder a la entrada del usuario y a los cambios de página a través del enlace de datos bidireccional.
2. Componentización: Vue.js permite a los desarrolladores convertir un solo componente en un módulo independiente, que tiene un excelente rendimiento y se puede reutilizar.
3. Sintaxis basada en plantillas: Vue.js proporciona una sintaxis de plantilla que permite a los desarrolladores simplemente escribir plantillas HTML y vincularlas a los componentes de Vue.js.

El principio receptivo de Vue2

El principio de respuesta de Vue2 se basa Object.defineProperty()en , que puede definir las propiedades de los objetos y secuestrarlos. Cuando cambia el valor de la propiedad, Vue puede detectar el cambio y volver a representar el contenido de la página correspondiente.

El principio de implementación específico es el siguiente:

1. En la fase de inicialización de Vue, Vue secuestrará recursivamente el dataobjeto y dataconvertirá todas las propiedades del objeto en getter/setterel formulario .
2. Cuando se utilizan datos en la página, Vue activará getterla función , Watcheragregando así el objeto actual (observador) a la dependencia de la propiedad actual.
3. Cuando los datos cambien, Vue detectará el cambio a través del oyente y activará setterla función , notificando así todas las dependencias bajo la propiedad Watcherpara actualizar;
4. WatcherUna vez que se notifica el objeto, enviará un mensaje al componente correspondiente para notificar que la vista debe volver a renderizarse, a fin de actualizar toda la página.

Cabe señalar que Vue2 solo puede monitorear los cambios de las propiedades de los objetos y no puede monitorear los cambios de agregar/eliminar propiedades de objetos y métodos de matriz, por lo que podemos usar Vue.set()el método o Vue.delete(). push(), pop(), splice(), shift(), unshift()métodos, etc. para manipular matrices.

El código de muestra del secuestro de datos de Vue2 es el siguiente:

const data = {
    
     msg: 'Hello Vue' }

Object.defineProperty(data, 'msg', {
    
    
  get() {
    
    
    console.log('get');
    return val;
  },
  set(newValue) {
    
    
    console.log('set', newValue);
    val = newValue;
  }
})

Explicación detallada de Object.defineProperty()

Object.defineProperty() es un nuevo método en ES5, que se utiliza para definir nuevas propiedades para objetos o modificar propiedades de objetos. Su sintaxis es la siguiente:

Object.defineProperty(obj, prop, descriptor)

El significado de los parámetros:

• obj: El objeto cuyas propiedades se van a definir.
• prop: El nombre de la propiedad a definir o modificar.
• descriptor: El objeto descriptor de atributos que necesita ser definido o modificado.

El objeto descriptor de propiedades contiene las siguientes propiedades opcionales:

• valor: el valor del atributo, que no está definido de forma predeterminada.
• escribible: si es verdadero, el operador de asignación puede cambiar el valor de la propiedad; el valor predeterminado es falso.
• enumerable: si es verdadero, la propiedad se puede enumerar al enumerar las propiedades del objeto, el valor predeterminado es falso.
• configurable: si es verdadero, puede usar el método Object.defineProperty() para modificar el descriptor de la propiedad; el valor predeterminado es falso.
• get: método de lectura de atributos.
• set: método de asignación de atributos.

Desventajas de Object.defineProperty()

• No se pueden monitorear los cambios de la matriz.
  Vue2 Defina el método que modificará la matriz original como un método de mutación.
  Los métodos de mutación como push、pop、shift、unshift、splice、sort、reverseetc. no pueden desencadenar set.
  Los métodos que no mutan, como filter，concat，sliceetc. , no modificarán la matriz original, pero devolverán una nueva matriz.
  Vue2El mejor enfoque es reescribir estos métodos de mutación para monitorear los cambios en la matriz.
• Cada propiedad del objeto debe ser atravesada. En la mayoría de
  los casos, es necesario cooperar con y atravesar, por lo que hay una capa adicional de anidamiento. Y debido al recorrido, si una determinada propiedad en el objeto no necesita ser "secuestrada", aún se le agregará "secuestro" en este momento.Object.definePropertyObject.keys
  
• Los objetos anidados deben recorrerse profundamente
  Cuando un objeto está anidado profundamente, debe recorrerse capa por capa Object.defineProperty()hasta que .

El principio receptivo de Vue3

El principio de respuesta de Vue3 utiliza principalmente ES6 Proxyen lugar de Object.defineProperty()Vue2, para lograr un secuestro de datos y una capacidad de respuesta más eficientes y potentes.

Los objetos proxy pueden implementar el secuestro de datos al interceptar el acceso y la modificación de datos. El objeto Reflect proporciona métodos de manipulación de datos más flexibles y fáciles de usar. Por ejemplo, puede usar Reflect.has() para verificar si un objeto tiene una determinada propiedad y usar Reflect.defineProperty() en lugar de Object.defineProperty( ).

El principio de implementación específico es el siguiente:

1. En la fase de inicialización de Vue3, Vue3 representará el dataobjeto mediante el uso Proxydel objeto, es decir, use new Proxy(target, handler), donde targetestá el objeto que se va a utilizar como proxy, handlery es un objeto que se usa para definir la operación targeten .

2. Cuando los datos se usan en la página, Vue3 activará getla operación , handler.get()se llamará al objeto proxy y luego permitirá handlercapturar la operación y Watcheragregar el objeto actual (observador) a la dependencia de la propiedad actual.

3. Cuando los datos cambien, Vue3 detectará el cambio a través del oyente y activará setla operación , y handler.set()se llamará al objeto proxy, notificando así a todos los objetos 'Watcher' dependientes bajo la propiedad para actualizar;

4. WatcherUna vez que se notifica el objeto, enviará un mensaje al componente correspondiente para notificar que la vista debe volver a renderizarse, a fin de actualizar toda la página.

El código para implementar la capacidad de respuesta de datos usando objetos Proxy en Vue3 es el siguiente:

const data = {
    
     msg: 'Hello Vue' }

const reactiveData = new Proxy(data, {
    
    
  get(target, key) {
    
    
    console.log('get');
    return target[key];
  },
  set(target, key, value) {
    
    
    console.log('set');
    target[key] = value;
    return true;
  }
})

En el código anterior, datael objeto reactiveDatase reactiveData. Al acceder a las propiedades del objeto, se llama a la función get() dentro del objeto Proxy; al establecer la propiedad, se llama a la función set() dentro del objeto Proxy . En las funciones get() y set(), se puede interceptar la lectura y asignación de atributos, para darse cuenta de la capacidad de respuesta de los datos.

Proxy detallado

Proxy es un nuevo objeto agregado en ES6. Se usa para hacer proxy de otro objeto e interceptar una serie de operaciones como lectura, asignación y definición de propiedades del objeto. Su sintaxis es la siguiente:

new Proxy(target, handler)

Parámetros en Proxy:

• destino: el objeto de destino que se va a enviar por proxy.
• handler: Un objeto cuya propiedad es una función de enlace (trap), que se utiliza para interceptar la operación del objeto proxy.

handler contiene las siguientes funciones de enlace opcionales (trampa):

• get(target, prop): se utiliza para interceptar la operación de lectura del objeto.
• set(target, prop, value): usado para interceptar la operación de asignación del objeto.
• has(target, prop): se utiliza para interceptar el en funcionamiento.
• deleteProperty(target, prop): se utiliza para interceptar operaciones de eliminación.
• apply(target, thisArg, args): se utiliza para interceptar llamadas a funciones.
• construct(target, args): utilizado para interceptar la nueva operación.

Ventajas del proxy

• ProxyLos objetos se pueden monitorear directamente en lugar de las propiedades;
• ProxyPuede monitorear directamente los cambios de la matriz;
• ProxyLo que se devuelve es un nuevo objeto, solo podemos operar el nuevo objeto para lograr el propósito, pero Object.definePropertysolo podemos atravesar las propiedades del objeto y modificarlo directamente;