f
Home

Published

- 7 min de lectura

Vue 3.4

vue
img of Vue 3.4

Traducido del post publicado por Evan You el 28 de diciembre del año 2023.

El equipo de Vue ha anunciado a la release de Vue 3.4 “Slam Dunk”.

Esta release incluye unas mejoras sustanciales, entre las que se destacan:

  • Reescritura del parser de plantillas, haciéndolo dos veces más veloz
  • Refactorización del sistema de reactividad que hace el trigger de los efectos sea más preciso y eficiente
  • Un número de mejoras de calidad de vida para la API, aglomerando la estabilización de defineModel y algunas denominaciones más cortas cuando se enlazan props.

Acciones potencialmente necesarias

  1. Para aprovechar al máximo las nuevas funciones de la versión 3.4, se recomienda actualizar también las siguientes dependencias al actualizar a la versión 3.4: Volar / vue-tsc@^1.8.27 (necesario)

    @vitejs/plugin-vue@^5.0.0 (si se utiliza Vite)

    nuxt@^3.9.0 (si utiliza Nuxt)

    vue-loader@^17.4.0 (si usas webpack o vue-cli)

  2. Si utiliza TSX con Vue, compruebe las acciones necesarias en Eliminado: Global JSX Namespace.

  3. Asegúrese de que ya no está utilizando ninguna feature obsoleta (si es así, debería recibir advertencias en la consola que se lo indiquen). Es posible que se hayan eliminado en la versión 3.4.

Features destacadas

Parser 2x más rápido y mejora de rendimiento de Builds de Single-File Components (SFC)​

En 3.4, fue reescrito completamente el parser de plantillas. Anteriormente, Vue utilizaba un analizador descendente recursivo que se basaba en muchas expresiones regulares y búsquedas anticipadas. El nuevo analizador utiliza un “tokenizador” de máquina de estados basado en el tokenizador de htmlparser2, que itera a través de toda la cadena de plantilla una sola vez. El resultado es un analizador sintáctico dos veces más rápido para plantillas de todos los tamaños. Gracias a extensos casos de prueba y ecosystem-ci, también es 100% compatible con versiones anteriores para los usuarios finales y devs de Vue.

Al integrar el nuevo analizador sintáctico con otras partes del sistema, también se descubrieron algunas oportunidades para mejorar aún más el rendimiento general de la compilación SFC. Los benchmarks muestran una mejora del ~44% al compilar las partes de script y plantilla de un SFC de Vue mientras se generan mapas fuente, por lo que 3.4 debería resultar en compilaciones más rápidas para la mayoría de los proyectos que utilizan SFCs de Vue. Sin embargo, tenga en cuenta que la compilación de Vue SFC es sólo una parte de todo el proceso de construcción en proyectos del mundo real. La ganancia final en el tiempo de compilación de extremo a extremo será probablemente mucho menor en comparación con los puntos de referencia aislados.

Fuera del núcleo de Vue, el nuevo analizador también beneficiará el rendimiento de Volar / vue-tsc, y plugins de la comunidad que necesitan analizar Vue SFCs o plantillas, por ejemplo, Vue Macros.

More Efficient Reactivity System

Contexto: PR#5912

La versión 3.4 también incluye una refactorización sustancial del sistema de reactividad, con el objetivo de mejorar la eficacia del recálculo de las propiedades calculadas.

Para ilustrar lo que se está mejorando, consideremos el siguiente escenario:

   const count = ref(0);
const isEven = computed(() => count.value % 2 === 0);

watchEffect(() => console.log(isEven.value)); // logea true

count.value = 2; // logea true de nuevo

Antes de la versión 3.4, el callback de watchEffect se activaba cada vez que se cambiaba count.value, incluso si el resultado calculado seguía siendo el mismo. Con las optimizaciones posteriores a 3.4, el callback sólo se activa si el resultado calculado ha cambiado de verdad.

Además, en la 3.4:

  • Los cambios múltiples en el resultado calculado sólo activan los sync effects una vez.
  • Los métodos “shift”, “unshift” y “splice” sólo activan los sync effects una vez.

Además de los beneficios mostrados en las pruebas comparativas, esto debería reducir las repeticiones innecesarias de componentes en muchos casos, al tiempo que se mantiene la compatibilidad con versiones anteriores.

defineModel es ahora estable​

Contexto: RFC#503

defineModel es la nueva macro de <script setup> que pretende simplificar la implementación de componentes compatibles con v-model. Anteriormente se incluyó en la versión 3.3 como función experimental, y en la 3.4 ha pasado a ser estable. Ahora también proporciona un mejor soporte para el uso con modificadores v-model.

Documentación relevante:

v-bind atajo del mismo nombre​

Contexto: PR#9451

Puedes abreviar esto:

   <img :id="id" :src="src" :alt="alt" />

así:

   <img :id :src :alt />

Esta función ha sido solicitada con frecuencia en el pasado. En un principio, hubo preocupaciones sobre si su uso se confundiera con el de los atributos booleanos. Sin embargo, después de revisar la función, tiene sentido que v-bind se comporte un poco más como JavaScript que los atributos nativos, teniendo en cuenta su naturaleza dinámica.

Mejoras en reporte de errores en relación a la hidratación​

Contexto: PR#5953

La versión 3.4 incorpora una serie de mejoras en los mensajes de error de desajuste de hidratación:

  1. Improved clarity of the wording (rendered by server vs. expected on client).
  2. El mensaje incluye ahora el nodo DOM en cuestión para que pueda localizarlo rápidamente en la página o en el panel de elementos.
  3. Las comprobaciones de desajuste de hidratación ahora también se aplican a la clase, el estilo y otros atributos vinculados dinámicamente.

Además, 3.4 también añade un nuevo indicador en tiempo de compilación, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__, que puede utilizarse para forzar que los errores de desajuste de hidratación incluyan todos los detalles incluso en producción.

Código de error y indicador de compilación

Para reducir el tamaño del paquete, Vue elimina las cadenas largas de mensajes de error en las compilaciones de producción. Sin embargo, esto significa que los errores detectados por los controladores de errores en producción recibirán códigos de error cortos que son difíciles de descifrar sin bucear en el código fuente de Vue.

Para mejorar esta situación, hemos añadido una página de referencia de errores de producción a la documentación. Los códigos de error se generan automáticamente a partir de la última versión estable de Vue.

También hemos añadido una Referencia de Banderas de Tiempo de Compilación con instrucciones sobre cómo configurar estas banderas para diferentes herramientas de compilación.

Features obsoletas removidas

Namespace Global en JSX​

A partir de 3.4, Vue ya no registra el namespace global en JSX por defecto. Esto es necesario para evitar la colisión del namespace global con React para que el TSX de ambas librerías puedan coexistir en el mismo proyecto. Esto no debería afectar a los usuarios de sólo SFC con la última versión de Volar.

Si utiliza TSX, hay dos opciones:

  1. Establezca explícitamente jsxImportSource como ‘vue’ en tsconfig.json antes de actualizar a 3.4. También puede optar por cada archivo añadiendo un comentario /* @jsxImportSource vue */ en la parte superior del archivo.
  2. Si tienes código que depende de la presencia del espacio de nombres JSX global, por ejemplo, el uso de tipos como JSX.Element, etc., puedes conservar el comportamiento global exacto anterior a la versión 3.4 haciendo referencia explícita a vue/jsx, que registra el namespace JSX global.

Tenga en cuenta que se trata de un cambio de ruptura de tipo en una versión menor, que se adhiere a la política de versiones.

Otras features removidas

  • Reactivity Transform se marcó como obsoleto en 3.3 y ahora se elimina en 3.4. Este cambio no requiere un major debido a que la característica es experimental. Los usuarios que deseen seguir utilizando la función pueden hacerlo a través del plugin Vue Macros.
  • Se ha eliminado app.config.unwrapInjectedRef. Estaba obsoleto y activado por defecto en 3.3. En 3.4 ya no es posible desactivar este comportamiento.
  • Los escuchadores de eventos @vnodeXXX en plantillas son ahora un error de compilación en lugar de una advertencia de desaprobación. Utiliza @vue:XXX listeners en su lugar.
  • Se ha eliminado la directiva v-is. Quedó obsoleta en la versión 3.3. Utiliza el atributo is con el prefijo vue: en su lugar.