De Vue 2 a Vue 3 utilizando Composition API

Fecha de publicación: octubre 3, 2020

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

De Vue 2 a Vue 3 utilizando Composition API

Hola Mundo

El primer caso va a ser simplemente un hola mundo para pasar un componente sencillo de Vue 2 a Vue 3 utilizando la nueva api de composición que Vue 3 nos ofrece.

Computed Properties

Ahora vamos a ver cómo pasar un componente en Vue 2 que utilice computed properties a Vue 3 con la api de composición.

Methods

Ahora vamos a ver cómo pasar un componente en Vue 2 que utillice methods a Vue 3 con la api de composición.

V-MODEL básico

La directiva v-model ha sido mejorada considerablemente, en esta ocasión simplemente vamos a ver un sencillo ejemplo de uso haciendo uso del método setup de Vue 3.

V-MODEL con Arrays

El trabajo con v-model utilizando Arrays es igual al v-model con un String, en este caso la diferencia es modificar el tipo de dato por un Array de la siguiente forma.

Comunicación entre componentes padre/hijo

La comunicación parent/child entre componentes en Vue 3 si que ha sufrido más cambios, veamos un ejemplo en Vue 2 y Vue 3.

Refs en templates

Un tema que también ha sufrido algunos cambios es la forma de utilizar refs en las templates, ya que si bien en Vue 2 únicamente teníamos refs en las templates y accedíamos desde los componentes con this.$refs, ahora también podemos definir datos haciendo uso de ref con los tipos primitivos más comunes.

Obtener datos externos, ejemplo con Fetch

El acceso a datos remotos de forma asíncrona también ha cambiado y ahora debemos modificar nuestra forma de trabajar.

Desarrollo de plugins

En Vue 2 la base para desarrollar un plugin es crear un objeto con el método install y utilizarlo con Vue.use. Esto en Vue 3 es posible, pero al utilizar el método setup perdemos el contexto del componente y debemos hacerlo de otra forma.

Hasta aquí bien, pero ahora debemos saber cómo utilizar nuestro plugin en cada versión, veamos.

Filtros, desaparecen en Vue 3

Los filtros ya no existen en Vue 3, ahora simplemente podemos utilizar computed properties para formatear los datos a nuestras necesidades.

¿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