Investigación sobre los principios de respuesta interna que deben aprender todos los días en Vue.js

Principio sensible

Ya hemos hablado sobre la mayor parte del contenido básico, y ahora hablaremos sobre el contenido subyacente. Una de las características más significativas de Vue.js es el sistema de respuesta: el modelo es solo un objeto normal, y modificarlo actualizará la vista. Esto hace que la gestión del estado sea muy simple e intuitiva, pero comprender sus principios también es importante y puede evitar algunos problemas comunes. A continuación, comenzaremos a profundizar en los detalles subyacentes del sistema de respuesta Vue.js.

Cómo rastrear los cambios

Al pasar un objeto normal a la instancia de Vue como su opción de datos, Vue.js atravesará sus propiedades y las convertirá a Getter/Setter con Object.DefineProperty. Esta es una función ES5 y no se puede implementar con parches. Es por eso que Vue.js no admite IE8 y más bajo.

Los usuarios no pueden ver getters/setters, pero internamente dejan que Vue.js rastree las dependencias, notificando los cambios cuando se accede y modifican las propiedades. Un problema es que el formato Getter/Setter es diferente cuando se imprime objetos de datos en la consola del navegador, y el uso del método de instancia VM. $ Log () puede obtener una salida más amigable.

Cada instrucción/enlace de datos en la plantilla tiene un objeto de observador correspondiente, que registra los atributos como dependencias durante el proceso de cálculo. Después de eso, cuando se llame al setter dependiente, se activará la recalculación del observador, lo que también causará sus instrucciones asociadas para actualizar el DOM.

Problema de detección de cambios

Debido a las restricciones ES5, Vue.js no puede detectar la adición o eliminación de las propiedades del objeto. Debido a que Vue.js convierte la propiedad en Getter/Setter Al inicializar la instancia, la propiedad debe estar en el objeto de datos para permitir que Vue.js la convierta para que responda. Por ejemplo:

 var data = {a: 1} var vm = new Vue ({data: data}) // `vm.a` y` data.a` ahora son receptivos vm.b = 2 // `vm.b` no es receptivo data.b = 2 //` data.b` no es receptiva no es receptiva

Sin embargo, hay una manera de agregar atributos después de la creación de instancias y hacerla receptiva.

Para instancias VUE, puede usar el método de instancia $ set (clave, valor):

 vm. $ set ('b', 2) // `vm.b` y` data.b` ahora son receptivos

Para objetos de datos normales, el método global vue.set (objeto, clave, valor):

 Vue.set (datos, 'c', 3) // `vm.c` y` data.c` ahora responden

A veces desea agregar algunas propiedades a un objeto existente, como usar Object.Assign () o _.extend () para agregar propiedades. Sin embargo, las nuevas propiedades agregadas al objeto no activan actualizaciones. En este momento, puede crear un nuevo objeto, incluidas las propiedades del objeto original y las nuevas propiedades:

 // no use `object.assign (this.SomeObject, {A: 1, B: 2})` this.SomeObject = object.Assign ({}, this.SomeObject, {A: 1, B: 2})

También hay algunos problemas relacionados con la matriz que se han discutido en la representación de la lista antes.

Inicializar datos

Aunque Vue.js proporciona una API para agregar dinámicamente los atributos de respuesta, se recomienda declarar todos los atributos de respuesta en los objetos de datos.

No hagas esto:

 var vm = new Vue ({Template: '<div> {{msg}} </div>'}) // luego agregue `msg`vm. $ set ('msg', 'Hola!')

Haz esto:

 var vm = new Vue ({data: {// declarar `msg` msg: '' '}, plantate:' <div> {{msg}} </div> '}) // luego configure` msg`vm.msg =' ¡Hola! '

Hay dos razones para hacer esto:

1. El objeto de datos es como un esquema de estado componente. Declarar todas las propiedades hace que el código de componente sea más fácil de entender.

2. Agregar una respuesta de respuesta de nivel superior obliga a todos los observadores a recalcular porque no existía antes y ningún observador lo rastrea. Este rendimiento suele ser aceptable (especialmente en comparación con las verificaciones sucias de Angular), pero se puede evitar en la inicialización.

Cola de actualización asincrónica

Vue.js predeterminado es actualizar asíncronamente el DOM. Cada vez que se observan cambios en los datos, Vue inicia una cola para almacenar en caché todos los cambios de datos en el mismo bucle de eventos. Si se dispara un observador varias veces, solo se empujará a la cola una vez. Espere hasta el siguiente bucle de eventos, Vue borrará la cola y solo realizará las actualizaciones DOM necesarias. MutationObServer se prefiere en las colas asincrónicas internas, y SetTimeOut (FN, 0) se usa si no es compatible.

Por ejemplo, con vm.somedata = 'nuevo valor' establecido, el DOM no se actualizará de inmediato, pero actualizará la próxima vez que el bucle de eventos borre la cola. Básicamente, no tenemos que preocuparnos por este proceso, pero ayudará si desea hacer algo después de actualizar el estado DOM. Aunque Vue.js alienta a los desarrolladores a seguir el enfoque basado en datos y evitar modificar directamente el DOM, a veces lo hace. Para esperar a que Vue.js complete la actualización del DOM después de que los datos cambien, puede usar Vue.NextTick (devolución de llamada) inmediatamente después de que cambien los datos. La devolución de llamada se llama después de que se completa la actualización DOM. Por ejemplo:

<div id = "ejemplo"> {{msg}} </div>

 var vm = new Vue ({el: '#Example', Data: {msg: '123'}}) vm.msg = 'nuevo mensaje' // modificar los datos vm. $ el.textcontent ==== '' nuevo mensaje '// falsevue.nextTick (function () {vm. $ el.textcontent ======' nuevo mensaje '// verdadero})

Este método de instancia es más conveniente porque no requiere un VUE global, y esta devolución de llamada se une automáticamente a la instancia de Vue actual:

 Vue.component ('Ejemplo', {Template: '<span> {{msg}} </span>, data: function () {return {msg:' no actualizado '}}, métodos: {updateMessage: function () {this.msg =' actualizado 'console.log (this. () {console.log (this. $ el.TextContent) // => 'actualizado'})}}})

El secreto de los atributos de la computación

Debe tener en cuenta que las propiedades calculadas de Vue.js no son simples getters. Las propiedades computacionales rastrean continuamente sus dependencias de respuesta. Al calcular una propiedad calculada, Vue.js actualiza su lista de dependencias y almacena en caché los resultados. Los resultados en caché no son válidos solo cuando una de las dependencias cambia. Por lo tanto, mientras la dependencia no cambie, el acceso a la propiedad calculada devolverá directamente el resultado en caché en lugar de llamar a Getter.

¿Por qué caché? Supongamos que tenemos una propiedad de cálculo de alto consumo A, que va a iterar a través de una matriz gigante y hacer muchos cálculos. Luego, puede haber otras propiedades calculadas que dependen de A. Si no hay caché, llamaremos al Getter de A muchas veces, más de lo necesario.

Dado que la propiedad calculada se almacena en caché, el getter no siempre se llama al acceder a ella. Considere el siguiente ejemplo:

 var vm = new Vue ({data: {msg: 'Hi'}, calculado: {ejemplo: function () {return date.now () + this.msg}}})

El ejemplo de propiedad calculada tiene solo una dependencia: vm.msg. Date.now () no es una dependencia de respuesta porque no tiene nada que ver con el sistema de observación de datos de VUE. Por lo tanto, al acceder a VM.Example, se encontrará que la marca de tiempo permanece sin cambios a menos que VM.MSG cambie.

A veces espero que Getter no cambie el comportamiento original y llame a Getter cada vez que acceda a VM.Example. En este momento, el caché se puede apagar para el atributo calculado especificado:

 calculado: {ejemplo: {cache: false, get: function () {return date.now () + this.msg}}}

Ahora, cada vez que accede a Vm. Ejemplo, la marca de tiempo es nueva. Sin embargo, acceder en JavaScript es así; La unión de datos todavía está impulsada por las dependencias. Si el atributo calculado {{ejemplo}} está vinculado en el módulo, el DOM solo se actualizará si la dependencia de la respuesta cambia.

Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.

Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.