¡Vue 3.2 Liberado!

Fecha de publicación: agosto 10, 2021

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Share on whatsapp
WhatsApp
Share on email
Email

Este artículo es una traducción de la publicación original del Blog de Vue.

 

¡Nos complace anunciar el lanzamiento de Vue.js 3.2 «Quintessential Quintuplets»! Esta versión incluye muchas funciones nuevas importantes y mejoras de rendimiento, y no contiene cambios importantes.

Nuevas caraterísticas SFC

Dos nuevas funciones para componentes de un solo archivo (SFC, también conocidos como archivos .vue) se han graduado del estado experimental y ahora se consideran estables:

script setup «sugar sintax» en tiempo de compilación que mejora enormemente la ergonomía cuando se usa la API de composición dentro de los SFC.


style v-bind habilita los valores CSS dinámicos controlados por el estado del componente en las etiquetas SFC style.

A continuación, se muestra un componente de ejemplo que utiliza estas dos nuevas funciones juntas:

Pruébalo en SFC Playground o lee sus respectivas documentaciones:

script setup

style v-bind

Sobre la base de script setup, también tenemos un nuevo RFC para mejorar la ergonomía del uso de referencias con «sugar» habilitado para el compilador.

Web Components

Vue 3.2 presenta un nuevo método defineCustomElement para crear fácilmente elementos personalizados nativos utilizando las API de componentes de Vue:

Esta API permite a los desarrolladores crear bibliotecas de componentes de interfaz de usuario con tecnología Vue que se pueden usar con cualquier marco, o sin ningún marco. También hemos agregado una nueva sección en nuestros documentos sobre el consumo y la creación de componentes web en Vue.

Mejoras de rendimiento

Vue 3.2 incluye algunas mejoras de rendimiento significativas en el sistema de reactividad de Vue, gracias al gran trabajo de @basvanmeurs. 

Implementación de referencias más eficiente (~ 260% más rápido de lectura / ~ 50% más rápido de escritura)

~ 40% más rápido seguimiento de dependencias

~ 17% menos de uso de memoria

El compilador de plantillas también recibió una serie de mejoras:

~ 200% más rápida creación de VNodes de elementos simples

Elevación constante más agresiva [1] [2]

Finalmente, hay una nueva directiva v-memo que brinda la capacidad de memorizar parte del árbol de plantillas. Un golpe de v-memo permite a Vue omitir no solo la diferencia de DOM virtual, sino también la creación de nuevos VNodes por completo. Aunque rara vez se necesita, proporciona una escotilla de escape para obtener el máximo rendimiento en ciertos escenarios, por ejemplo, listas grandes de v-for.

El uso de v-memo que es una adición de una línea, coloca a Vue entre los frameworks convencionales más rápidos en js-framework-benchmark:

Vue 3.2 Benchmark

Server-side Rendering

El paquete @vue/server-rendereren 3.2 ahora incluye una compilación del módulo ES que también está desacoplado de los componentes integrados de Node.js. Esto hace posible agrupar y aprovechar @vue/server-rendererpara su uso dentro de tiempos de ejecución que no son de Node.js, como CloudFlare Workers o Service Workers.

También mejoramos las API de renderizado de transmisión, con nuevos métodos para renderizar a la API de Web Streams. Consulta la documentación de @vue/server-renderer para obtener más detalles.

Effect Scope API

Vue 3.2 introduce una nueva API de alcance de efectos para controlar directamente el tiempo de eliminación de los efectos reactivos (calculados y observadores). Facilita el aprovechamiento de la API de reactividad de Vue fuera del contexto de un componente y también desbloquea algunos casos de uso avanzados dentro de los componentes.

Esta es una API de bajo nivel destinada principalmente a los autores de bibliotecas, por lo que se recomienda leer el RFC de la función para conocer la motivación y los casos de uso de esta función.


 

Para obtener una lista detallada de todos los cambios en 3.2, consulte el registro de cambios completo.

 

Ruta de aprendizaje Vue 3 Composition API

¿Quieres acceder a más de 150 cursos de PHP y JavaScript?

¿Quieres ganar tiempo en tus desarrollos con nuestros proyectos descargables?


Vue, Laravel, Inertia, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Hazte Premium y consigue acceso completo
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register