¿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

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/