buk.cl
Crea un lugar de trabajo más feliz
Cuando Evan You anunció el soft release de Vue 3 para fines del 2021, la comunidad estaba ansiosa por finalmente trabajar con una versión estable de esta popular librería. Personalmente venía trabajando con Nuxt 2 esperando la promesa de que Nuxt 3 apenas saliera la versión final de Vue 3, así que ese trimestre final era clave. Con todo en orden finalmente el 7 de febrero de 2022 fue la fecha donde Vue 3 era definido como la versión por defecto en NPM. En este artículo presentaremos las grandes novedades y mejoras de esta esperada nueva versión de Vue JS.
La librería minimizada (y comprimida con gzip) pesa alrededor de 11kb, gracias a un gran trabajo de modularización y soporte solo a browsers modernos. ¡Impresionante!
Gracias a esta reescritura por módulos de Vue 3, cada componente permite ser incluído o eliminado si no es utilizado (gracias tree-shaking). Por ejemplo si no utilizas una directiva como v-if o un componente como <transition> estos no serán incluídos en el bundle final:
// en Vue 2 todo el objeto Vue es importado y utilizado en producción
import Vue from 'vue'
// En Vue 3 solo propiedades importadas son incluídas en el bundle final
import { Transition, vIf } from 'vue'
Este feature ha sido muy esperado por la comunidad y es una gran mejora en la performance. En la versión 2 de Vue JS nos acostumbramos a los getter y setters que iban recorriendo recursivamente todos los objetos y sus propiedades para transformarlos; ya con Web Proxies es nativo y más rápido la respuesta ante cambios en el Virtual DOM.
Otra esperada funcionalidad, Composition API mejora la reutilización de lógica y orden en la organización del código. En Vue 2 se utilizan comúnmente propiedades como data, methods y computed entre otros. En Vue 3 se exponen estas propiedades como funciones, lo que permite flexibilidad a la lógica de componentes y un código más legible. Mira el siguiente ejemplo:
<template>
<div>
8
<button @click="increment">+</button>
</div>
</template>
function myCount() {
const count = ref(0)
function increment () { count.value++ }
return {
count,
increment
}
}
Y lo instanciamos en la nuevo método setup(), que es una función que retorna propiedades y funciones al <template>:
export default {
setup () {
const { count, increment } = myCount()
return {
count,
increment
}
}
}
Básicamente portals proporciona una forma de renderizar hijos en un nodo existente pero fuera de la jerarquía DOM del componente padre. En otras palabras son componentes que renderizan contenido fuera del componente actual. Imagina hidratar una ventana modal de contenido sin tener que enviarle datos como argumentos:
<portal to="modal">
<p>Lorem ipsum dolor sit amet…</p>
</portal>
En otro componente:
<portal-target name="modal">
// aquí se renderizará <p>Lorem ipsum…</p>
</portal-target>
Junto con el lanzamiento de esta versión, el ecosistema ha evolucionado con muchas nuevas librerías:
Suspense, fragments… ¡wow! Hay mucho más que aprender de la tercera versión de Vue, y es una de las librerías que se utilizan en Buk para construir las interfaces e interacciones que son utilizadas por millones de usuarios de la plataforma dentro de latinoamérica.
¡Te invito a conocer más de Buk y los beneficios de ser un #buker!