Primeros pasos con Vue 3

En la entrada anterior dejamos la plantilla básica para trabajar con Vue 3, del que ya he hablado en varias ocasiones (el camino a Vue 3) y te he contado los conceptos básicos. Ahora, es hora de aprender a utilizar las novedades que iremos desgranando poco a poco. Damos los primeros pasos con Vue 3, y un sencillo ejemplo con Composition API.

Double Bindings con ref

Cuando empecé con Vue 2, mi primer paso fue comprobar lo bien que funciona data-binding, y eso es exactamente lo que vamos a implementar con Composition API, y para lo cual, necesitamos utilizar ref. Para ello, sólo vamos a tener que modificar app.js de nuestra plantilla. El código queda tal que así:

const {ref} = Vue;
const app = {
    name: 'App',

    setup() {
        const title = ref("Vue 3 with @manejandodatos - Version 0.2");
        
        return { title };
    },
    template: `
      <div>
        <h1>{{title}}</h1>
        <input v-model="title">
      </div>
    `,
};

export default app;

Lo interesante de la modificación está en la primera línea, donde extraemos ref del objeto vue. Y el segundo detalle es que la constante title usa dicha función ref.

Cómo siempre, todo lo que devuelve setup es lo que se podrá utilizar en la plantilla. Con esto tan simple, ya tenemos two way data-binding:

Cómo podéis comprobar, no es complicado, pero requiere de esos primeros conocimientos para seguir avanzando.

Lo aprendido en estos primeros pasos de Vue 3

De momento, en estos primeros pasos con Vue 3 ya habrás podido observar que, además de lo que ya sabes de Vue 2, hay nuevas opciones para programar en Vue 3.

De momento, esto es lo que he ido aprendiendo sobre Vue 3, que tiene diferencias con respecto a lo que conocía, y por eso estoy trabajando paso a paso, poco a poco. Aun no he probado VueX (sí en Vue 2) o VueRouter, porque necesito ir consolidando conceptos para sacar el mejor rendimiento a Vue 3. En la próxima entrada haremos un primer ejemplo, dónde haremos lo mismo a la forma de Vue 2 y con Composition API.

Happy coding.