¿Qué mejoras tiene vue3 en términos de rendimiento?
Descripción general
Vue (pronunciado /vju?/, similar a view) es un marco incremental para crear interfaces de usuario. Vue2 ha demostrado ser muy fácil de usar y popular para crear aplicaciones front-end, y en vue3, hemos optimizado y mejorado el rendimiento para hacerlo aún más fácil de usar, flexible y eficiente. El futuro pertenece a la era de vue3, por lo que es muy importante tener una comprensión profunda de cómo vue3 mejora el rendimiento en comparación con vue2 y cómo mejorarlo.
Optimización del orden del compilador
En Vue2, cada instancia de componente corresponde a una instancia de observador, que registra las propiedades utilizadas como dependencias durante la representación del componente y notifica a los observadores cuando las dependencias cambian, lo que activa un configurador. , lo que hace que los componentes relacionados se vuelvan a representar
Supongamos que un componente vue tiene la siguiente estructura de plantilla. Un componente vue tiene la siguiente estructura de plantilla:
Como puede ver, solo hay un nodo dinámico dentro del componente, y el resto de los nodos son nodos estáticos, por lo que no hay necesidad de muchos diferencias y recorridos aquí, de lo contrario provocará una pérdida de rendimiento. Por lo tanto, Vue3 realizó más optimizaciones durante la fase de compilación. Las principales optimizaciones son las siguientes:
Optimización del algoritmo de diferencia
En comparación con vue2, vue3 agrega una etiqueta estática al algoritmo de diferencia, que está diseñado para agregar una etiqueta estática donde cambia Se producirá un marcador para que la próxima vez que ocurra un cambio, pueda buscar directamente allí para comparar, como se muestra a continuación
El tipo estático se muestra a continuación
Promoción estática
Vue3 promoverá estáticamente elementos que no participan en las actualizaciones. Estos elementos solo se crean una vez y se reutilizan directamente al renderizar, por lo que no es necesario crear nodos repetidamente.
Antes del levantamiento estático
Después del levantamiento estático
El contenido estático _hoisted_1 está fuera de la función de renderizado y solo necesita obtener _hoisted_1 cada vez que renderiza. Al mismo tiempo, _hoisted_1 está marcado como PatchFlag, con un valor de -1 que indica un indicador estático y un entero negativo que indica que nunca se volverá a utilizar. flag es un número entero negativo y nunca se usará en Diff
Antes de la serialización
En el proceso de desarrollo habitual de vue, no hay muchos elementos dinámicos en el componente, la mayoría de ellos son todos los elementos estáticos. Por ejemplo:
En este componente, a excepción del elemento span, que es un elemento dinámico, el resto son nodos estáticos. Generalmente, se puede describir mediante la relación dinámica/estática. contenido dinámico / contenido estático, cuanto menor sea la proporción, cuanto más contenido estático, mayor será la proporción, más contenido dinámico, y el compilador vue3 lo descubrirá de manera muy inteligente. compílelo directamente en una cadena ordinaria.
En vue3, el "contenido estático" es un nodo de cadena ordinario, porque sabe que este contenido nunca cambiará y es estático.
Sin embargo, en vue2, cada elemento se convertirá en un nodo virtual, un montón de nodos virtuales. En vue3 descubrirá esto de forma inteligente. Como se muestra a continuación, podemos sentir claramente la enorme mejora de rendimiento aportada por vue3
Controlador de eventos de caché
Por ejemplo, existe el siguiente controlador de eventos
< botón @ click="count++">plus button>
Compare los métodos de procesamiento de vue2 y vue3
En vue2, cree un botón de nodo virtual y lea count++ Cree un evento adicional al hacer clic dentro el atributo.
En vue3, se supone que el procesamiento de eventos aquí no cambiará, en lugar de decir que esta vez la presentación es una función de evento, la próxima vez será otra cosa, por lo que vue3 descubrirá esto de manera inteligente y realizará el procesamiento de caché. primero verifique en el caché si existe una función de evento de este tipo internamente; de ser así, se devolverá directamente; de lo contrario, se asignará directamente como una función de recuento ++ para garantizar que la función de procesamiento de eventos solo se genere una vez;
Optimización SSR
Cuando el contenido estático alcanza un cierto nivel, el método createStaticVNode se utilizará para generar nodos estáticos en el cliente. Estos nodos estáticos serán directamente internalHtml sin creación. luego basado en el objeto Para renderizar. Presente.
Antes de la compilación
Después de la compilación
Optimización del tamaño del código fuente
En comparación con Vue2, Vue3 es más pequeño en general, con algunas eliminaciones Más oscuras características como la compatibilidad con keyCode como modificadores para v-on, on, off y $once. Además, Vue3 también admite métodos de instancia, filtrado, plantillas en línea, etc. La estructura de árbol se basa en la estructura estática de la sintaxis del módulo ES2015 (es decir, importar y exportar) para buscar y marcar módulos que no se introducen mediante análisis estático durante la fase de compilación. . Cualquier función (como ref, revtived, calculada, etc.) solo se empaquetará cuando se use, y los módulos no utilizados se eliminarán, lo que hará que el tamaño total del paquete sea más pequeño.
Optimización de la implementación de la respuesta
Cambiar a la API de proxy para implementar el secuestro de datos
La respuesta es diferida
lify.app/