Vue 3 a través de Vue Composition API

Fecha de publicación: enero 19, 2020

Compártelo


Vue 3 es la nueva versión del framework JavaScript Vuejs que nos ofrecerá muchas mejoras a través de su nueva API. Digo nos ofrecerá porque a día de hoy (15/01/2020) todavía no ha sido publicado.

En esta entrada vamos a ver una introducción a Vue 3 para entender qué nos ofrecerá Vue 3 a través Vue Composition API, un plugin que podemos instalar en un proyecto Vue 2 para probar todo lo que Vue 3 nos ofrecerá antes de su liberación.

Es importante decir que lo que venimos haciendo con Vue 2 seguirá funcionando al 100% en Vue 3, así que Vue 3 nos aportará nuevas funcionalidades, pero sin romper lo que ya conocemos y la forma en la que desarrollamos nuestros proyectos en la actualidad con Vue 2.

Cursos de Vue de 0 a 100

Vue Composition API

Vue Composition API puedes instalarlo con el siguiente comando dentro de cualquier proyecto Vue 2.

yarn add @vue/composition-api

Con eso tu proyecto Vue 2 tendrá todo lo que Vue 3 nos ofrecerá y podremos empezar a desarrollar nuestro ejemplo a fin de comparar Vue 2 con Vue 3.

Componente contador con Vue 2

Antes de ver cómo desarrollar con Vue 3, vamos a crear un componente contador sencillo con Vue 2 que después pasaremos a Vue 3.

Componente contador con Vue 3

Ahora que ya hemos visto el ejemplo con Vue 2, veamos cómo pasar ese código a Vue 3, es muy sencillo.


  • setup nos permitirá escribir los componentes a través de composición basadas en funciones.
  • ref son los datos que siempre hemos definido dentro de data.
  • computed son computed properties.

Podemos ver que la template es exactamente igual, eso es porque en la nueva API, aunque sí tendremos cambios, todo funcionará de la misma forma de cara al desarrollador.

Si nos fijamos en el script, podemos ver que estamos importando ref y computed de la siguiente forma:

import { ref, computed } from '@vue/composition-api';

Es importante dejar claro que cuando Vue 3 sea publicado deberemos hacer el import de la siguiente forma:

import { ref, computed } from 'vue';

La idea es muy simple, definir toda la lógica del componente dentro del setup en lugar de hacerlo utilizando data, computed y methods. Visto así puede parecer algo confuso ya que podemos llegar a tener demasiado código dentro del setup y eso puede hacer que nuestros componentes sean complejos de mantener.

Composición de componentes a través de funciones en Vue 3

Para solucionar el problema que puede suponer tener componentes difíciles de mantener a medida que crecen, debemos tener muy presente la composición de componentes a través de funciones que definiremos y llamaremos a medida que necesitemos. Para entenderlo mejor, vamos a refactorizar el componente SimpleCounter.

Composable SimpleCounter

Lo primero que vamos a hacer es refactorizar el código del setup del componente SimpleCounter a un archivo separado que después llamaremos.

Esa es la idea, en este caso le hemos llamado composableSimpleCounter, pero le podemos llamar como deseemos dependiendo de lo que vayan a hacer, eventos, composición etcétera.

Para utilizar composableSimpleCounter en nuestro componente SimpleCounter sólo debemos modificar el código por el siguiente:

Hemos pasado de tener un componente con 30 líneas de código a tener un componente con 19 líneas de código, no está nada mal. Esa es la esencia de la composición de componentes basados en funciones, refactorizar todo nuestro código en pequeñas funciones que después podamos llamar desde cualquier componente.

Ciclo de vida en Vue 3

El ciclo de vida de los componentes en Vue 3 trabajará de la misma forma que lo hace en Vue 2, pero con una sintaxis opcional a través del setup.

En Vue 2 el hook mounted se define de la siguiente forma:

En Vue 3 el hook mounted se define de la siguiente forma:

Importamos los hooks que necesitemos al igual que hacemos con ref o computed, en este caso onMounted es el hook mounted que ya conocemos y que se ejecuta cuando el componente ya ha sido montado por Vue.

Si quieres seguir aprendiendo a trabajar con Vue 2 y Vue 3 suscríbete a la plataforma y accede ahora a todos los cursos de la plataforma.

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

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

Quiero hacerme Premium
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login