VueJS 2: Tutorial básico de introducción en 2019

tutorial básico de introducción de vuejs 2
tutorial básico de introducción de vuejs 2

1. Introducción a Vue.JS

En este tutorial os hablaremos de Vue JS. Vue fue creado en el año 2014 como un proyecto personal de Evan You, ex ingeniero de Google. Ahora cuenta con un equipo de decenas de personas y una comunidad enorme que se han involucrado de lleno en el desarrollo de este framework.

Inspirado en proyectos como Angular y React, el objetivo de Vue desde un principio ha sido el de crear un entorno simple y accesible para crear interfaces de usuario.

En los últimos años, la popularidad de Vue ha crecido hasta el punto de ser unos de los framworks más queridos por los desarrolladores según la encuesta de Stackoverflow de 2019. Además, es el segundo proyecto de GitHub con más estrellas, lo que indica el cariño que le tiene la comunidad.

Esta exponencial ganancia de popularidad se debe a varios aspectos.

Todo esto y mucho más hace que Vue js nos permita ofrecer una experiencia más intuitiva e interactiva de una forma realmente sencilla.

2. Como instalar Vue

Tenemos varias opciones para empezar a usar Vue. Según nuestras necesidades optaremos por usar una u otra.

2.1 Inclusión directa mediante <script>

Esta manera es la más cómoda para prototipos o proyecto pequeños. Podemos descargar el archivo de JavaScript que contiene Vue en 2 formatos, una versión de desarrollo y otra de producción, que es más ligera (versión minificada).

Otro modo sería usar una red de distribución de contenidos, comúnmente llamado CDN.

Con el fin de aprender o crear prototipos, se recomienda usar la última versión de desarrollo disponible.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Si deseas usarlo en producción, lo mejor sería utilizar una versión estable para que no surjan errores imprevistos. En este caso hemos marcado la versión 2.6.10 que es la última versión de Vue 2 a día de hoy (Julio de 2019).

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

2.2 Node Package Manager

Npm es el método de instalación recomendado para construir aplicaciones a gran escala. Se empareja muy bien con paquetes como Webpack y proporciona herramientas para la creación de Single File Components como veremos más adelante.

Para instalar Vue de esta manera, primero necesitas instalar NodeJS y NPM. Una vez instalado, bastaría con lanzar el siguiente comando en la terminal.

# versión estable
npm install vue

2.3 Vue CLI

Vue nos ofrece una interfaz de línea de comandos (CLI) que está compuesta por muchas herramientas que nos permiten elegir qué dependencias o librerías queremos usar en nuestro proyecto.

De la misma manera que hemos necesitado NPM en el apartado anterior, aquí también lo usaremos para instalar Vue cli. Para instalarlo solo debemos ejecutar el siguiente comando en la terminal.

# Instalaremos globalmente la última versión estable de Vue-CLI
npm i -g @vue/cli

Una vez se descargue, nos faltaría darle un nombre a nuestro proyecto y crearlo con la siguiente línea. Entonces nos dará opción a escoger una configuración manual o por defecto.

vue create <nombre-del-proyecto>
configuración de vue cli
Herramientas que podemos escoger en la configuración manual de Vue CLI

Una vez escogemos dichas librerías, las instala y configura por nosotros, así nos evita mucho trabajo inicial. Asimismo nos configura Webpack, es un sistema de bundling que agrupa todos los ficheros JavaScript, CSS, imágenes y dependencias en un solo fichero optimizado para producción.

También habilita el Hot Reload, esto significa que al editar un fichero vue, todas las instancias se actualizarán automáticamente sin necesidad de actualizar la página o de volver a compilar el código manualmente.

2.4 Laravel y Vue para crear aplicaciones web

Tanto si quieres crear una SPA (Simple Page Application) como si necesitas una aplicación web compleja y escalable que requiera de interacción con APIs y bases de datos, recomendamos usar el stack de Laravel y Vuejs que viene por defecto.

Laravel es un Framework de código abierto para desarrollar aplicaciones y servicios web con PHP. Tenemos en nuestro blog un tutorial de laravel que explica todo lo básico para empezar a desarrollar con Laravel.

3. Configurar nuestro editor de código

Antes de empezar a picar código, debemos elegir y configurar nuestro editor de código. En nuestro caso utilizamos Visual Studio Code en la mayoría de nuestros proyectos. Gracias a sus extensiones y su sencilla interfaz, resulta ser una experiencia muy agradable a la hora de programar.

Para empezar a trabajar con Vue recomendaría no sobrecargar el editor e instalaría solo las extensiones que de verdad ayuden a mejorar tu flujo de trabajo.

4. Single File Components

Los componentes de Vue son instancias reutilizables con nombre único que se declaran mediante una etiqueta HTML, como por ejemplo, <list-item>. Existen varias formas de crear componentes en Vue, pero cada una tiene sus ventajas y desventajas.

Por ejemplo, podemos definir componentes globales como en el ejemplo de abajo. Este ejemplo es útil para proyectos de pequeño-medio tamaño y si se va utilizar para mejorar ligeramente el apartado visual de las vistas.

// Definimos el componente global list-item
Vue.component('list-item', {
  data: function () {
    return {
      description: 'Soy una descripción'
    }
  },
  template: `
    <h1>Título</h1>
    <p>{{ description }}</p>
  `
})
<template>
  <p>{{ description }}</p>
</template>

<script>
  export default {
    name: 'list-item',
    data() {
      return {
        description: 'Soy una descripción'
      };
    }
  }
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

Sin embargo, para aquellos proyectos más grandes y complejos cuya interfaz este completamente controlada mediante JavaScript, necesitan afrontar de otra manera las evidentes desventajas que surgen al usar esta sintaxis.

4.1 Estructura de los SFC

Todos estos problemas anteriores se solucionan haciendo uso de los Single File Components (SFC), que son ficheros que terminan con la extensión .vue. Estos ficheros están divididos en 3 bloques principales. <template>, <script> y <style>.

Single File Component vue template
Plantilla Vue de un Single File Component

En la etiqueta <template> declaramos el código HTML para diseñar la vista del componente. En este bloque podremos añadir las variables del objeto data, métodos y mucho más que iremos viendo más adelante.

En la sección <script> podemos definir la lógica de la aplicación y determinar el código que queremos ejecutar durante los ciclos de vida del componente.

Importante, data debe ser siempre una función para que distintas instancias del mismo componente no compartan los valores del objeto.

Finalmente, en el bloque <style> añadimos los estilos CSS para personalizar el componente. En este bloque podemos indicar si queremos utilizar un preprocesador como SASS siguiendo los siguientes pasos.

npm install -D vue-loader vue-template-compiler sass-loader node-sass
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... Otras reglas
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    // asegúrate de incluir el plugin
    new VueLoaderPlugin()
  ]
}

Además si deseamos que estos estilos sean exclusivos para el componente, solo hace falta añadir el atributo scoped en la etiqueta <style>. De forma que quedaría de la siguiente manera: <style scoped>.

5. Sintaxis de una plantilla Vue

Vuejs utiliza una sintaxis de plantilla basada en HTML que nos permite renderizar declarativamente datos en el DOM. Una de las características más distintivas de Vue es su sistema de reactividad. Como los datos y el DOM están enlazados, al editar el valor de un objeto de JavaScript, la vista se modifica.

Vue compila internamente estas plantillas a funciones de renderizado del DOM Virtual. En combinación con el sistema de reactividad, Vue es capaz de analizar la cantidad mínima de componentes a renderizar y así, manipular lo menos posible el DOM cuando el estado de la aplicación cambia.

5.1 Interpolaciones

5.1.1 Texto

La forma más sencilla de enlazar datos a la vista es mediante la sintaxis de Bigote (‘llaves dobles’).

<span>Mensaje: {{ message }}</span>

La propiedad message será reemplazada por su valor correspondiente, y si en algún momento este se modifica, se actualizará la vista con el nuevo valor.

Si por algún motivo no deseas que se produzcan varios renderizados, puedes aplicar la directiva v-once a tu etiqueta HTML. El uso principal de esta directiva es el de optimizar el rendimiento al actualizar datos de la página.

5.1.2 Representación de HTML

La interpolación de texto interpreta la variable en texto plano, por eso, si necesitamos generar HTML a través de esta variable, necesitamos usar la directiva v-html.

<span v-html="message"></span>

La representación dinámica del HTML puede ser muy peligrosa porque puede conducir fácilmente a vulnerabilidades de XSS. Por eso mismo solo deberíamos usar este método en el caso de que el código HTML incrustado sea controlado por nosotros y no el usuario.

5.1.3 Atributos

No podemos utilizar la interpolación de texto dentro de los atributos HTML. Para eso necesitamos usar la directiva v-bind. Nos puede servir de gran utilidad para atributos únicos y dinámicos, como lo son por ejemplo: id, checked y disabled.

<div v-bind:id="itemId"></div>

<button v-bind:disabled="isDisabled">Aceptar</button>

<input v-bind:checked="isChecked" type="checkbox"/>

5.1.4 Expresiones de Javascript

Vue nos permite utilizar expresiones de Javascript para interpretar nuestros datos, como por ejemplo operaciones matemáticas y operadores ternarios.

<span>Stock: {{ number + 1 }}</span>

<span>{{ isValid ? 'Yes' : 'No' }}</span>

<span>Mensaje invertido: {{ message.split('').reverse().join('') }}</span>

<div v-bind:id="'item-' + id"></div>

5.2 Directivas

Las directivas son atributos especiales que empiezan con el prefijo v-. El objetivo de estas directivas es el de reaccionar a los cambios y aplicarlos en el DOM.

<p v-if="isVisible">Será visible según el valor de 'isVisible'</p>

<a v-bind:href="url"> ... </a>

Además, las directivas también nos permite escuchar y gestionar eventos producidos en el DOM.

<a v-on:click="exportCSV"> ... </a>

En resumen, en la siguiente tabla os mostramos algunas de las directivas más comunes y útiles que podéis utilizar en vuestros proyectos.

DirectivaDefinición
v-bindSe utiliza para actualizar de forma reactiva un atributo HTML.
v-onEscucha eventos del DOM para después ejecutar métodos de JS.
v-ifSirve para renderizar un bloque condicionalmente.
v-showSimilar a v-if, pero este oculta los bloques y no los inserta/elimina, lo cual repercute en el rendimiento
v-else / v-else-ifDirectiva que se ejecuta cuando no se cumple la condición del v-if.
v-forLos usamos para iterar y renderizar un listado de elementos.
v-modelEnlaza bidireccionalmente con elementos de formulario.

5.2.1 Diferencias entre v-if y v-show

Estas dos directivas se utilizan con el mismo fin, pero tienen una pequeña diferencia. Por un lado v-if se encarga de crear y destruir los elementos que pertenezcan a su bloque. Además lo hace mediante carga diferida, es decir, que si la condición inicial es falsa, no hará nada hasta que sea verdadera.

Por otro lado, v-show es mucho más simple. El elemento siempre se representa independientemente de la condición inicial, y su visibilidad es conmutada mediante CSS.

En general, v-if tiene un mayor impacto en el rendimiento si se realizan muchos cambios de estado, mientras que v-show tiene un coste de renderización inicial más alto. Por lo tanto, es preferible usar v-show si necesita alternar la condición muy a menudo, y v-if cuando sea poco probable que la condición cambie en el tiempo de ejecución.

5.2.2 Atributos y eventos dinámicos

Desde la versión 2.6.0 podemos utilizar argumentos dinámicos en las directivas. De este modo, si tenemos una propiedad con el valor de un atributo o un evento, y deseamos modificarla dinámicamente, podemos añadirla de la siguiente manera.

<a v-bind:[attributeName]="url"> ... </a>

<a v-on:[eventName]="exportCSV"> ... </a>

5.3 Abreviaturas

Para simplificar la sintaxis de nuestro código, podemos reducir las claves v-bind y v-on con las abreviaturas ‘:’ y ‘@’ respectivamente. De forma que el resultado final sería algo así.

<button :href="url"> ... </button>
<button :[attributeName]="url"> ... </button>

<button @click="exportCSV"> ... </button>
<button @[eventName]="exportCSV"> ... </button>

6. Propiedades computadas y observadores

Las expresiones en la plantilla son muy convenientes, pero están diseñadas para operaciones simples. Poner demasiada lógica en sus plantillas puede hacerlas difíciles de entender y mantener. Por ejemplo, con un ejemplo anterior.

<span>Mensaje invertido: {{ message.split('').reverse().join('') }}</span>

Llegados a este punto, la plantilla ya no es simple y declarativa. Es por eso que para cualquier lógica compleja, es mejor usar una propiedad computada (computed property).

<span>Mensaje invertido: {{ reversedMessage }}</span>

data() {
  return {
    message: 'Lorem ipsum'
  }
},
computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

Aunque las propiedades computadas son más apropiadas en la mayoría de los casos, hay veces que necesitamos un observador (watch) para reaccionar a nuestros datos.

Antes de nada, debemos nombrar a la función watch con el mismo nombre que la variable que queremos controlar. En el ejemplo de abajo, el observador se ejecutará cada vez que cambiamos algo en el input.

<div id="#app">
  <input type="text" v-model="name" />
</div>

new Vue({
  el: '#app', 
  data() {
    return {
      name: ''
    }
  },
  watch: {
    name() {
      console.log('The name has changed!')
    }
  }
})

Generalmente, este observador se utiliza para operaciones más complejas o para realizar peticiones asíncronas.

7. Ciclos de vida de un componente

Los ciclos de vida son una parte muy importante de Vue y sus componentes. Al principio puede resultar agobiante e innecesario, pero a medida que vayas aprendiendo y construyendo aplicaciones de Vue, verás que es una pieza vital que te ayudará a optimizar tus recursos para crear una aplicación potente y completa.

Gracias a la documentación oficial de https://vuejs.org/ te ofrecemos este diagrama de los ciclos de vida de un componente.

Diagrama del ciclo de vida de un componente Vue
Diagrama del ciclo de vida de un componente

7.1 beforeCreate & created

Estos son los métodos (hooks) de creación que se ejecutan nada más instanciar el componente. Aunque no parezcan muy relevantes en un principio, esta fase es muy importante para optimizar la precarga de recursos.

beforeCreate, en este estado no se puede acceder ni al estado del componente ni a sus eventos, ya que todavía no se han registrado.

Sin embargo, en created, el componente ya es reactivo porque ha registrado tanto los eventos como los observadores. Hay que tener en cuenta que no esta fase no se han renderizado ningún elemento del DOM.

Como he mencionado antes, aquí podemos optimizar la precarga de datos procedentes de APIs o librerías externas y almacenarlos en el objeto data que ya es funcional y reactivo.

7.2 beforeMount & mounted

Una vez el componente se ha creado, entramos en la fase de renderizado o montaje. Estos hooks te permiten acceder inmediatamente antes y después del primer renderizado del componente. Sin embargo, no se ejecutan si utilizamos un renderizado del lado del servidor (Server side rendering).

beforeMounted ocurre justo antes de renderizar cualquier elemento del DOM. Por esta razón casi nunca se va a utilizar este método.

mounted, en este hook tendrás acceso completo al componente reactivo, sus plantillas y el DOM renderizado (this.$el). Este hook es de los más usados ya que nos permite modificar el DOM justo después de iniciarlo. Un ejemplo muy evidente sería renderizar los datos que hayamos precargado anteriormente en el hook created.

7.3 beforeUpdate & updated

Esta fase sería aquella en la que el usuario ya puede interaccionar con la página. Los hooks de actualización se lanzan cuando una propiedad del componente cambia, o se produce un evento que obligue al componente a actualizarse.

Es de utilidad para saber el estado del componente y para depurar la aplicación. No se deberían usar en el caso de que queramos saber cuando cambia una propiedad, para eso existen las computed properties y los watchers que veremos más adelante.

7.4 beforeDestroy & destroyed

La última fase pero no menos importante es la de destrucción. Aquí podemos optimizar la memoria de la instancia eliminando sus propiedades, hacer limpieza de variables globales o finalizar informes de analítica.

8. Control de eventos mediante métodos

En todas las aplicaciones necesitamos usar funciones que nos permitan interactuar con la interfaz y conectar con bases de datos. Por eso haremos uso del objeto methods y declararemos tantos métodos como necesitemos. Un dato clave que diferencia los métodos de los hooks de ciclos de vida es la posición donde se declaran.

En el ejemplo de abajo podemos ver como el hook created() se declara independientemente del resto, y los métodos que hemos creado dentro del objeto methods.

<template>
  <div>
    <a :href="url">Leer más</a>
    <span @click="add">{{ number }}</span>
    <!-- Así declararíamos el componente Card que hemos importado -->
    <Card /> 
  </div>
</template>

<script>
  // Aqui importamos un componente de ejemplo
  import Card from './Card.vue'

  export default {
    name: 'example',
    components: {
      'Card'
    }
    data() {
      return {
        url: 'https://www.inarvis.com',
        number: 0
      };
    },
    created() {
      console.log('Se ha creado el componente!')
    },
    methods: {
      add() {
        this.number += 1
      }
    }
  }
</script>

<style></style>

8.1 Modificadores de eventos

Es muy común que en determinados momentos necesitemos alterar el comportamiento esperado de los eventos. Se puede dar el caso que no nos interese redireccionar a una página externa después de enviar un formulario. Por ese motivo, Vue nos ofrece varios selectores para modificar la conducta de los eventos para la directiva v-on (@).

ModificadorDefinición
.stopEvita que más eventos se propaguen en el DOM. Lanza el evento stopPropagation().
.preventCancela el evento sin detener el resto del funcionamiento. Lanza el evento preventDefault().
.captureManeja el evento en la fase de captura, es decir, antes de llegar al elemento objetivo.
.selfSolo se activa cuando el event.target es el elemento objetivo.
.onceEl evento en cuestión se ejecutará como mucho una vez.
.passiveMejora el rendimiento de los eventos de toque en móviles.
<!-- Las propagación de eventos se parará después del click -->
<a @click.stop="onClick"></a>

<!-- El evento de envío no recargará la página -->
<form @submit.prevent="onSubmit"></form>

<!-- Se pueden enlazar varios modificadores -->
<a @click.stop.prevent="doSomething"></a>

<!-- Usar el modo de captura al añadirlo en el event listener. -->
<div @click.capture="doSomething">...</div>

También podemos acceder a los eventos producidos por el teclado mediante modificadores de teclas específicas.

<input @keyup.enter="submit">

<input @keyup.page-down="onPageDown">

9. Enviar datos a componentes hijo mediante ‘props

Las propiedades (props) son atributos personalizados que puedes enlazar a un componente para que se convierta en una propiedad de esa instancia. Un componente puede tener tantas propiedades como desee y se pueden enviar cualquier tipo de dato.

En el apartado anterior hemos visto un ejemplo de prueba de un Single File Component y como podíamos importar un componente hijo.

Vamos a modificar ese ejemplo usando varios métodos que hemos ido viendo hasta ahora. Utilizaremos axios para enviar peticiones HTTP a una API para y simularemos que recogemos un listado de objetos en el hook created().

<template>
  <div class="container">
    <div class="card-wrapper" v-for="card in cards" :key="card.id">
      <Card :item="card" />
    </div>
  </div>
</template>

<script>
  // Importamos el componente Card y la dependencia Axios (Necesario instalarla)
  import Card from './Card.vue'
  import axios from 'axios'

  export default {
    name: 'example',
    components: {
      'Card'
    }
    data() {
      return {
        cards: [],
        errors: []
      };
    },
    created() {
      axios
        .get('url-de-la-api')
        .then(response => this.cards = response.data)
        .catch(error => this.errors.push(error))
    },
  }
</script>
<template>
  <div class="card">
    <h1>{{ item.title }}</h1>
    <p>{{ item.description }}</p>
  </div>
</template>

<script>
  export default {
    name: 'card',
    props: ['item']
  }
</script>

Se puede apreciar como en el componente padre hemos declarado el componente ‘Card’ y le hemos enviado un ‘item’ como propiedad. Este atributo item tiene como valor un objeto que hemos llamado card al obtenerlo de la iteración del elemento padre (.card-wrapper).

Una vez dentro del componente hijo, la propiedad toma el nombre del atributo y se convierte en propiedad de la instancia.

Ojo, cada vez que se actualice el componente principal, todas las propiedades del componente secundario se actualizarán con el último valor. Esto significa que no se debe intentar mutar un objeto dentro de un componente secundario.

10. Componentes dinámicos y asíncronos

Es muy habitual sobrecargar una sola página con muchos componentes independientes. En muchas de esas ocasiones nos interesa mantener su estado y evitar múltiples renderizaciones que afecten al rendimiento global.

Un ejemplo muy claro sería el agrupar varios componentes en pestañas de una ventana. Al cambiar de vista entre estas, Vue creará una nueva instancia y perderíamos el estado del componente anterior. Por eso utilizaremos la etiqueta keep-alive.

10.1 Keep alive para componentes dinámicos

Para evitar el problema mencionado antes, tenemos a nuestra disposición la etiqueta <keep-alive>. Esto se encarga de cachear los componentes internos una vez que se crean por primera vez.

<!-- Los componentes inactivos se almacenaran en cache -->
<keep-alive>
  <component :is="currentTab"></component>
</keep-alive>

<script>
import firstComponent from '...'
import secondComponent from '...'

export default {
  name: 'example',
  data(){
    return {
      currentTab: 'firstComponent'
    }
  },
  components: {
    'firstComponent ',
    'secondComponent '
  },
}
</script>

A parte de la nueva etiqueta keep-alive, hemos utilizado un nuevo atributo especial ‘is’. Este atributo se ocupa de cargar componentes registrados dinámicamente.

11. Componentes funcionales

Lo óptimo para organizar y estructurar una aplicación es plantearla mediante el principio DRY (Don’t Repeat Yourself). Habrá casos en los que necesitaremos crear componentes diminutos, como por ejemplo elementos de interfaz de usuario que no requieran de ningún tipo de funcionalidad.

En ese caso la mejor opción es usar componentes funcionales, lo que significa que son entidades sin estado (sin datos reactivos) y sin instancia (sin el contexto this). El objeto context tiene acceso a lo siguiente.

Vue.component('my-component', {
  functional: true,
  // Props son opcionales
  props: {
    // ...
  },
  // Para compensar la ausencia de instancia,
  // ahora obtenemos el segundo parámetro 'context'.
  render: function (createElement, context) {
    // ...
  }
})
<template functional>
  <figure :click="doSomething">
    <img :src="props.src" />
    <div>
      <span v-for="tag in props.tags"> {{ tag }}</span>
    </div>
  </figure>
</template>

El uso de componentes funcionales puede mejorar el rendimiento de tu aplicación ya que son más fáciles de renderizar. Además, escribirlos como Single File Components hace que sean más coherentes y fáciles de leer.

12. Reutilizar componentes con mixins

Los mixins son una forma flexible de encapsular una parte de código que podemos reutilizar en múltiples componentes de Vue. Cuando un mixin se mezcla con un componente, todos sus datos y métodos se fusionan en uno.

export const exampleMixin {
  created() {
    this.writeMessage()
  },
  data() {
    return {
      message: 'Soy un mixin!'
    }
  },
  methods: {
    writeMessage() {
      console.log(this.message)
    }
  }
}
export default {
  mixins: [exampleMixin]
}

Un objeto mixin puede incluir cualquier tipo de opción que se admita en un componente. Por eso mismo, en ocasiones se dará el caso de que un mixin y un componente entren en conflicto, en ese caso, el componente siempre tiene prioridad.

12.1 Mixins globales

También podemos aplicar mixins globalmente. Aunque hay que utilizarlo con precaución, ya que una vez declarado, afectará a todas las instancias existentes y se pueden dar conflictos inesperados. Solo hace usar una sintaxis algo diferente en el archivo raíz.

// Inyectamos una opción personalizada 'message'
Vue.mixin({
  mounted() {
    var message = this.$options.message
    console.log(message)
  }
})

new Vue({
  message: 'Este mensaje se mezclará en todos los componentes',
  render: h => h(App)
}).$mount('#app')

13. Vue Devtools

Vue Devtools es una extensión que podemos encontrar para Chrome y Firefox. Es una extensión creada con electron y es la herramienta de depuración más completa que existe para Vuejs.

Imagen de ejemplo de Vue Devtools
Depuración de una aplicación Vue con Devtools.

Con esta herramienta podemos ver las propiedades de todos los componentes de la ventana actual y ver en tiempo real como se modifican. Tiene una interfaz muy sencilla que facilitan la búsqueda de bugs que no podríamos detectar de otra manera.

14. ¿Cuál es el futuro de Vue?

A día de hoy (Julio de 2019) el cambio más esperado es la llegada de Vue 3 a finales de este año. Esta nueva versión es muy prometedora y va a suponer un punto de inflexión en el mundo del frontend.

Más rápido y mantenible. Vue 3 está siendo reescrito desde 0 con TypeScript, así muchos de los paquetes y librerías sean desacoplados, lo cual hará que Vue sea más modular.

Actualmente en Vue, cuando un componente principal se vuelve a procesar, obliga a sus hijos a reescribirse. No obstante, con Vue 3, ambos pueden renderizarse independientemente.

Además el sistema de reactividad dejará de usar los getters y setters con Object.defineProperty. En Vue 3 se utilizará los proxies de ES2015 que doblarán su velocidad y reducirán el uso de memoria a la mitad.

Más ligero. Está revisión y modularidad va a suponer un descenso importante en el tamaño de las aplicaciones. Gracias al Tree Shaking, no se instalarán las librerías que no estemos utilizando.

15. Conclusión

Su crecimiento ha sido exponencial desde su creación en el año 2014 y tiene un futuro muy prometedor con las nuevas actualizaciones que se avecinan en los próximos años.

Está posicionado como uno de los mejores frameworks de frontend para diseñar interfaces UI potentes y complejas con una curva de aprendizaje muy rápida.

Vue se ha ganado el corazón de los desarrolladores de todo el mundo, sin embargo, en algunos países sigue sin tener el reconocimiento que se merece a nivel empresarial.

Esperamos que este tutorial de Vue js 2 os haya gustado y os sirva de ayuda para crear cualquier tipo de aplicación web.

Si te ha gustado, compártelo en las redes sociales!