No hay productos en el carrito.
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 150 cursos de PHP y JavaScript?
¿Quieres ganar tiempo en tus desarrollos con nuestros proyectos descargables?
Vue, Laravel, Inertia, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más
Hazte Premium y consigue acceso completo