Vue 3 será más rápido

Uno de los eventos más llamativos en el mundo de Frontend este año fue la publicación del próximo repositorio de Vue , parte de la funcionalidad de la tercera versión de VueJS. Este artículo proporciona una descripción general de las nuevas características asesinas de VueJS. En el momento de la publicación del artículo, el repositorio estaba en estado Pre-Alpha . Los planes de lanzamiento se pueden ver en Roadmap

Antecedentes

En febrero de 2018, Evan You, el creador de Vue.js, compartió sus planes para la versión 3 del popular marco:

• Divida la funcionalidad en paquetes para aislar el alcance
• TypeScript aparece en la base de código
• Vue 3 será compatible con versiones anteriores de la segunda versión (es decir, no romperá el código anterior)
• Los observadores en la versión 3.0 se basan en Proxy, lo que aumentará la velocidad de representación y eliminará una serie de restricciones impuestas por Object.defineProperty
• Podrá debutar con los nuevos ganchos renderTracked y renderTriggered
• Gracias a la introducción de la sacudida del árbol (excluyendo las directivas no utilizadas de la compilación), el tamaño del marco será inferior a 10 kb en forma comprimida
• Optimización de tragamonedas
• El rendimiento en vue 3 mejorará 100%

Las características como los componentes integrados y los asistentes de tiempo de ejecución de directivas (modelo v) ahora se importan a pedido y se pueden sacudir en árbol.
Evan tu

El compilador rastreará la existencia de directivas y las incluirá en la compilación en la etapa de compilación.

En el proceso de trabajar en Vue 3, Evan se negó a reescribir componentes en clases y en su lugar implementó una API funcional.

Dado que la nueva versión utilizará proxies que no son compatibles con IE, Evan planea crear una compilación separada para IE11. En total, 4 fases prometen:

1. Alpha Phase - etapa de finalización del compilador y ssr-rendering
2. Fase Beta: etapa de finalización de las bibliotecas principales (Vue Router, Vuex, Vue CLI, Vue DevTools)
3. Fase RC - Etapa de prelanzamiento que incluye Vue 2.0
4. IE11 build
5. Lanzamiento final

Evan ha planeado un lanzamiento final para 2019, pero el proyecto aún está en etapa pre-alfa.

Vue 3 será más rápido

Gracias a una serie de innovaciones, Vue 3 será 2 veces más rápido que la versión anterior.

Observación basada en proxy y reactividad

Una de las principales innovaciones fue el cambio en el mecanismo para monitorear objetos de getters y setters de Object.defineProperty a Proxy. Ahora Vue puede rastrear la eliminación y la adición de propiedades de objetos reactivos sin usar Vue.set y Vue.delete. ¡La innovación aumentó la velocidad de renderizado y scripting y redujo el consumo de memoria en 2 veces! Puede comparar el rendimiento de Vue 2 y Vue 3 descargando el repositorio de Ilya Klimov

Comparación de rendimiento de Vue 2 (izquierda) y Vue 3 (etapa pre-alfa, derecha)


Gracias a los proxies, la reactividad no se perderá al cambiar las manipulaciones de objetos que no se rastrean en Vue 2. Ahora Vue no recorre recursivamente las propiedades de un objeto para calcular los cambios.

Lo que se hace de las promesas:

• Los descendientes y los padres se vuelven a dibujar independientemente
• El tamaño del Vue 3 disminuyó de 20 kb a 10 kb en forma comprimida
• TypeScript agregado

Otras optimizaciones:

• Vue 3 recordará contenido estático y parcheará solo datos dinámicos
• Los accesorios estáticos aumentan el alcance
• Para facilitar el desarrollo, el código Vue 3 se divide en paquetes modulares.
• El paquete runtime-core se hace multiplataforma
• En lugar de clases, Evan agregó una función de configuración y ganchos que hacen que el código sea limpio, organizado y reutilizable *
• Corte de tiempo *. La ejecución del código JS se corta en pedazos sin bloquear la interacción del usuario con la aplicación

Los asteriscos indican la API experimental .
Actualización: más tarde, Evan decidió abandonar el tiempo.

Inspirado por el HOC, Reacta Evan implementó funciones de configuración con lógica reutilizable y ganchos personalizados. A diferencia de los mixins, los ganchos de ciclo de vida no se sobrescriben entre sí.

Parche VDom mejorado

Joystick de contenido estático



El contenido estático se mueve fuera del parche VDom al compilar la plantilla. Vue se inspiró en Svelte para hacer esto:

 <div>Hello, {{name}}</div> 

Aquí, se pasan el objeto y el contexto modificados . Si se modifica contiene una variable reactiva, se actualiza en contexto.

 p(changed, ctx) { if(changed.name) { set_data(t1, ctx.name); } } 

En la implementación anterior, el compilador de Vue pasó por todos los nodos, incluidos los estáticos:

 function render(){ const children = []; for(let i = 0; i < 5; i++) { children.push(h('p', { class: 'text' }, i === 2 ? this.message : 'Lorem upsum')) } return h('div', { id: 'content' }, children) } 

Nueva estrategia de compilación de plantillas

En la nueva versión, la plantilla se divide en bloques:

• La plantilla se divide en bloques.
• La estructura de los nodos dentro de cada bloque es completamente estática.
• Para rastrear valores dinámicos en un bloque, solo se requiere 1 matriz plana, donde se colocan

Con la nueva estrategia, el rendimiento depende directamente de la cantidad de contenido dinámico en lugar del tamaño de la plantilla.

Vue 3 se adaptará mejor a grandes proyectos

Los proyectos grandes enfrentan los siguientes problemas cuando usan Vue:

1. No es compatible con TypeScript
2. Componentes masivos y difíciles de soportar
3. Falta de un patrón simple para reutilizar el código

Inicialmente, se planeó agregar clases para admitir TS. Pero el equipo de Vue tuvo problemas:

• Mezclar accesorios y otros atributos con esto es problemático
• Los decoradores para las clases de ES6 en TC39 son inestables

El equipo de Evan solicitó ayuda de los expertos de TC39 y descubrió que una implementación similar podría entrar en conflicto con los complementos que mezclan varios accesorios y atributos en el contexto Vue.

Potencialmente, estos problemas podrían ser resueltos por los decoradores, pero todavía están en desarrollo.

API de composición

El equipo de Vue se inspiró en los ganchos React y decidió crear una API similar. Es opcional y está en desarrollo y discusión, por lo que algunos nombres pueden cambiar.
El concepto principal de este cambio es organizar el código del componente de manera más lógica, dividiéndolo en bloques semánticos. Puede leer más sobre la composición API en la documentación .

Un ejemplo de uso de Vue 3. Un componente se divide en funciones lógicas, dentro de las cuales puede usar reactividad y ganchos de ciclo de vida.

Importe los nuevos ganchos de la API de composición:

 import { reactive, computed, onMounted } from '@vue/composition-api'; export default { setup() { const { state } = countAnimal("rabbit") const { getType, anotherState } = anotherCount() return { state, getType, anotherState } } } 

La función countAnimal tiene propiedades reactivas count, animal y el método de incremento . Con un contador extraño, el nombre del animal cambia. El contador comienza cuando se monta el componente.

 function countAnimal(name) { const state = reactive({ count: 0, animal: computed(() => state.count % 2 ? name : 'bear') }) function increment() { setTimeout(() => { state.count++; increment() }, 1000) } onMounted(() => { increment() }) return { state } } 

Creamos otra función anotherCount , que también contiene el método de incremento y estado con el contador y el nombre del animal. El método getType pasa el nombre del animal de la plantilla.

 function anotherCount() { const anotherState = reactive({ count: 0, animal: 'fox' }) function getType(name) { return name == 'bear' ? 'slow' : 'fast' } function increment() { setTimeout(() => { anotherState.count+=10; increment() }, 1000) } onMounted(() => { increment() }) return { getType, anotherState } } 

La plantilla muestra 2 contadores y 2 nombres de animales. El tipo de carrera varía según el nombre del animal.

 <template> <div> <div>Count {{state.animal}}: {{ state.count }}</div> <div>{{state.animal}} runs {{getType(state.animal)}}</div> <div>Another: Count {{anotherState.animal}}: {{ anotherState.count }}</div> </div> </template> 

Se utilizan nuevos ganchos dentro de la configuración sin romper la antigua API. Tenga en cuenta que onMounted se refiere a un enlace de ciclo de vida de un solo componente.

Esta API tiene varias ventajas:

• Los ganchos de ciclo de vida no se rozan entre sí
• Fuente clara de propiedades
• No se crean instancias de componentes adicionales

Conclusión

Los cambios más importantes en Vue 3 se enumeran arriba. La mayoría de las mejoras estarán ocultas bajo el capó del código generado por el compilador.

Grandes mejoras:

• El código generado es óptimo para el compilador JS
• Paquete generado más fácil
• Los componentes padre / hijo se vuelven a dibujar gracias al algoritmo de parche mejorado

Vue se ha establecido como uno de los marcos más rápidos y óptimos. La nueva versión será aún más rápida y fácil. Vue 3 es ideal para la web móvil y orientada al rendimiento actual. Los comentarios sobre cambios futuros se pueden dejar en el RFC oficial (solicitud de comentarios).
PD: Gracias por corregir errores tipográficos.