Resumen relacionado con los principios de vue

1. Cómo implementar el enlace bidireccional en vue 2.0

2. observador, compilar, observador

(1) observar es un detector de datos, el El método principal es Object.defineProperty

(2) La compilación es un analizador de comandos que se utiliza para escanear y analizar los nodos y propiedades que se van a monitorear.

3. Ventajas de este modo: no se requiere una llamada explícita, los cambios se pueden notificar directamente y la vista se puede actualizar. Los configuradores de propiedades son secuestrados y no se requieren operaciones de diferenciación adicionales.

4.Objeto. Desventajas de defineProperty: no se requiere una llamada explícita, los cambios se pueden notificar directamente y las vistas se pueden actualizar. Los configuradores de propiedades son secuestrados y no se requieren operaciones de diferenciación adicionales. Desventajas de Object.defineProperty

(1) No puede monitorear matrices

(2) No puede monitorear el objeto completo. Solo puede monitorear atributos

(3) No puede monitorear la adición o eliminación de atributos, solo puede monitorear cambios

Proxy utilizado en la versión 5.0

(1) Sí Matriz de escucha

(2) Puede monitorear directamente todo el objeto sin atributos recursivos

(3) Obtener y configurar parámetros directamente sin almacenar variables por separado

(4 ) new Proxy() devuelve un nuevo objeto sin contaminar el objeto fuente.

2. Los datos no se actualizan

1. Principio de actualización: recopile dependencias al leer datos y notifique a las dependencias para que se actualicen al asignar valores.

2. El objeto tiene un método defineProperty, que solo monitorea la lectura y asignación de propiedades a través de captadores y definidores. No se pueden detectar propiedades nuevas ni propiedades eliminadas, por lo que $set y $delete se proporcionan especialmente para la implementación.

3. La matriz no tiene método defineProperty ni setter. Los métodos nativos push, pop, shift, unshift, splice, sort y reserve se modifican mediante get y nuevos interceptores de métodos de matriz para implementar el monitoreo. Al modificar los subíndices de la matriz, no se detectarán cuando se operen matrices, por lo que $set y $delete se proporcionan específicamente para la implementación

4. $set (destino, clave, valor) y $delete (destino, nombre de propiedad/índice ) El principio del método

(1) Determinar si el objetivo es indefinido, nulo o un tipo primitivo, o una instancia de vue, o un objeto de datos bajo una instancia de vue

(2) Si el objetivo es una matriz, actualice los datos llamando a splice para operar el índice

(3) Si el objetivo es un objeto y responde, llame a defineReactive para operar los datos

(4) Después de actualizar los datos, Notificar actualizaciones de dependencia

3. Cálculo, seguimiento y métodos

1.calculado

(1) Diseño original: Simplifique las operaciones lógicas en la plantilla

(2) Adecuado para escenarios donde se reutilizan datos o los cálculos son escenarios complejos y que requieren mucho tiempo y dependen de otros datos

(3) La caché de lectura y las dependencias permanecen sin cambios, por lo que no es necesario volver a calcular.

(Juzgado según la bandera sucia)

2. watch es una devolución de llamada para monitorear datos

3. La diferencia entre calculado y watch

Similitud: ambos observan la página Los datos cambian

Diferencias: (1) el cálculo leerá el caché y la vigilancia se debe volver a ejecutar cada vez

(2) la vigilancia se debe volver a ejecutar cada vez; ;

(3) el cálculo leerá el caché y la vigilancia debe volver a ejecutarse cada vez

(4) la vigilancia debe volverse a ejecutar cada vez.

(2) Watch es más adecuado para operaciones asincrónicas y operaciones costosas cuando cambian los datos.

4. La diferencia entre cálculo y método

El cálculo se basa en el caché y se pueden definir captadores y definidores, pero no los métodos

4.modo vue-router. La diferencia entre

1. resumen: usado en un entorno sin navegador

2. hash:

(1) Predeterminado. Supervisar la implementación del cambio de hash.

(2) Un poco, buena compatibilidad, admite ie8

(3) Desventaja: se ve raro

3. Historial:

(1) h5 nuevo. Permita que los desarrolladores modifiquen directamente el enrutamiento front-end sin volver a activar la página de solicitud

(2) Principio de implementación: escuche el evento popstate. Puede escuchar el clic del usuario en los eventos de avance y retroceso del navegador o llamar manualmente a los eventos de avance, retroceso y avance; no puede escuchar los eventos pushState y replaceState;

(3) Para evitar la página 404 al actualizar el navegador, debe configurar la compatibilidad en el lado del servidor.

(4) Si el navegador no lo admite, se degradará al modo hash

* Mezcle el almacenamiento en los ciclos de vida antes de crear y destruir a través del complemento vue.use mecanismo y vue.mixin.

5. ¿Qué problemas resuelve vuex?

1. vuex resuelve el problema de gestión del estado de los datos en el proyecto vue

2. Es un tipo de componente Camino de comunicación.

3. Principio: crear un árbol de estado único que contenga estados, mutaciones, acciones, captadores y módulos.

4. ver(despachar)acción(commitir)mutación(mutar)estado(renderizar)vista

5. Hacer que el estado responda a través de los datos y cálculos de vue,

6. Mezcle el almacenamiento en el ciclo de vida beforeCreate a través del mecanismo de complemento vue.use y vue.mixin.

6. Cómo se implementa nextTick

1. Función: Retrasar la devolución de llamada hasta que se ejecute el siguiente ciclo de actualización DOM

2. Motivo: VUE está actualizando El DOM es asincrónico. VUE no actualiza el DOM inmediatamente después de detectar cambios en los datos. En lugar de eso, abre una cola de eventos, almacena en el búfer todos los cambios de datos en el bucle y actualiza el DOM en el siguiente tick.

3. El mecanismo de ejecución de js: js es de un solo subproceso, se basa en un bucle de eventos y tiene macrotareas y microtareas.

4. Principios internos:

(1) Capacidades de detección: Promise.then (micro), MutationObserve (micro), setImmediate (micro), setTimeout (macro)

(2) Inserte la función de devolución de llamada en la cola de devolución de llamada, bloquee el bloqueo de Yibu y ejecute la devolución de llamada.

7. Componentes integrados que mantienen vivo y algoritmo LRU (cola)

1. No se presentará al DOM en sí y no hay anotaciones regulares. un componente de función. Úselo. La encapsulación del componente se almacenará en caché en la memoria en lugar de destruirse al cambiar.

(1) Se puede almacenar en caché de forma condicional: incluir (almacenar en caché después de la coincidencia), excluir (no almacenar en caché después de la coincidencia), máximo (número máximo de instancias de componentes que se pueden almacenar en caché)

2 .Principio: utilice la estrategia LRU para mantener internamente this.cache (objeto de componente almacenado en caché) y this.keys (this.key).

(1) Haga clic en el componente de caché para ajustar el orden de las claves de los componentes.

(2) Si el número de componentes de la caché excede this.max, elimine el primer componente de la caché.

(3) LRU (Usado Menos Recientemente): Elimina datos basados ​​en registros de acceso históricos. "Si se ha accedido a los datos recientemente, existe una mayor probabilidad de que se acceda a ellos en el futuro".

3. Hook del ciclo de vida: activación y desactivación, llamado cuando el componente incluido en keep-alive se activa o desactiva. Desactive los componentes desactivados antes de activar los componentes activados 4.