Vue.js 3 está próximo a ser lanzado, con mejoras para el rendimiento de nuestras aplicaciones y diferentes características interesantes que optimizarán nuestro código. A continuación, te presentamos algunas de estas características y una breve explicación de cada una de ellas.
Afortunadamente, Vue 3 trae nuevas características adicionales en lugar de cambios mayores en la estructura actual del framework, lo que hace que no tengamos que preocuparnos en aprender una sintaxis totalmente diferente a la de Vue 2. Comencemos con la primera de estas características:
Composition API
Composition API es un enfoque totalmente nuevo para la reutilización de nuestro código y organización de nuestros proyectos. Actualmente construimos componentes agregando la lógica mediante opciones como data, methods y computed. Uno de los principales problemas de esto, es que necesitas saber exactamente que propiedades son accesibles en la plantilla, así como el comportamiento de la palabra reservada this. Debido a que esto no es código JavaScript como tal, el compilador de Vue debe transformar estas propiedades en código funcional.
La Composition API resuelve este problema al exponer diferentes mecanismos a través de propiedades de componentes como funciones de JavaScript. El código escrito mediante Composition API es más legible y fácil de entender.
El equipo de Vue define la Composition API como:
Un conjunto de APIs aditivas basadas en funciones que permiten una composición flexible de la lógica de componentes.
Veamos un ejemplo de un componente que usa la nueva Composition API paso a paso:
<template>
<button @click="increment">
{{ count }} - {{ double }}. Haz clic para incrementar.
</button>
</template>
<script>
import { ref, computed, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
onMounted(() => console.log('Componente montado.'))
return {
count,
double,
increment
}
}
}
</script>
La Composition API expone las propiedades de componentes como funciones, por ello, lo primero que debemos hacer es importar las funciones que necesitamos. En nuestro caso necesitamos ref, computed y onMounted. Lo siguiente es el método setup que tenemos; se trata de una función que retorna propiedades y funciones a la plantilla. Lo que no retornemos desde setup no estará disponible en la plantilla.
Más adelante, dentro de setup, declaramos una propiedad reactiva llamada count usando la función ref. El valor de dicho elemento será mantenido en una propiedad llamada value. Por ese motivo para acceder al valor usamos count.value. Al final simplemente retornamos count y double junto al método increment para que estén disponibles en la plantilla.
Este es un ejemplo bastante sencillo; sin embargo, una de las ventajas principales de la Composition API es su poder para la reutilización de código y lógica en nuestras aplicaciones.
Fragmentos
Otra de las nuevas características de Vue.js 3 son los fragmentos. Si creas un componente de Vue.js, éste puede tener sólo un elemento padre. El motivo de esto, es que la instancia de Vue que representa cualquier componente necesita estar enlazada a un sólo elemento del DOM, y la única forma de crear un componente con múltiples nodos DOM es creando un componente funcional que no depende de una instancia de Vue.
Actualmente, mediante el plugin vue-fragments podemos usar fragmentos de la siguiente forma:
export const MyComponent {
components: { VFragment },
template: '
<fragment>
<input type="text" v-model="message">
<span>{{ message }}</span>
</fragment>
',
data() { return { message: 'hello world' }}
}
Sin embargo, con Vue 3 tendremos esta característica disponible de forma nativa.
Portales
Los portales son componentes especiales pensados para renderizar determinado contenido fuera del componente actual. Es una buena forma de, por ejemplo, trabajar con modales y contenido que debe mostrarse en la parte superior de una página. Al usar portales puedes asegurarte de que ninguna regla de CSS afecte al componente en cuestión y que éste pueda mostrarse de forma correcta sin necesidad realizar ningún hack adicional.
Para cada portal necesitamos especificar el target o destino donde el contenido del componente será mostrado.
Actualmente podemos realizar esto con el plugin portal-vue; sin embargo Vue 3 traerá esta característica de forma nativa.
v-model múltiples
Los v-model son bastante útiles cuando queremos tener un enlace de datos en dos direcciones, pero desafortunadamente sólo podemos tener un v-model por componente. En Vue 3 seremos capaces de tener tantos v-model como queramos. Por ejemplo:
<ContactForm v-model:name="contactName" v-model:email="contactEmail" />
Esto funciona asignándole un nombre a cada v-model, tal como puedes observar en el ejemplo superior.
API para directivas personalizadas
La API para directivas personalizadas cambiará un poco en Vue 3. Este cambio hará que la API sea más intuitiva y fácil de entender.
En Vue 3 la API se verá de la siguiente forma:
const MyDirective = {
beforeMount(el, binding, vnode, prevVnode) {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {}, // new
unmounted() {}
}
Aunque este es un cambio que podría interferir con nuestro código anterior, debería ser fácil de cubrir con una compilación de compatibilidad de Vue.
Suspense
El componente Suspense suspende la renderización de un componente y renderiza un componente fallback hasta que una condición sea cumplida. Suspense es simplemente un componente con slots que muestra el contenido de #fallback hasta que Suspended-component sea renderizado completamente:
<Suspense>
<template >
<Suspended-component />
</template>
<template #fallback>
Cargando..
</template>
</Suspense>
Suspense puede esperar hasta que el componente sea descargado (si se trata de un componente async) o realizar acciones async en la función setup.
Esto es solo un abreboca de todo el material que estamos preparando sobre Vue 3 para Styde. Únete a nuestro listado de correos y síguenos en Twitter para estar al tanto de próximos tutoriales y nuevas lecciones.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
