De Vue 2 a Vue 3 utilizando Composition API
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.