Cómo crear variables reactivas con Vue

Antes de empezar tienes que saber que en Vue tienes dos tipos de variables, las variables reactivas y las que no son reactivas.

Variables reactivas

Las variables reactivas se llaman así porque son capaces de refrescar la vista de los componente cuando éstas cambian.

Imagina que en la vista (en el HTML) pintas una variable que contiene un string. Si en cualquier punto del componente actualizas esa variable, la vista se actualizará automáticamente sin tener que hacerlo a mano.

Para crear variables reactivas tienes dos sintaxis, auque en el fondo la funcionalidad es la misma.

La primera sintaxis es la que te recomiendo usar, básicamente tienes que crear una propiedad llamada data dentro de al lógica del compomente:

<script>
export default {
  name: "MiComponente",
  data: () => ({
    miVariable: "Hello World"
  }) 
};
</script>

Como ves data es una función anónima con arrow function. Esta arrow function siempre va a devolver un objeto en el que cada key del objeto es el nombre de la variable.

En el ejemplo de arriba he creado en el componente una variable reactiva llamada miVariable que tiene como valor inicial Hello World.

Puedes crear tantas variables como quieras:

<script>
export default {
  name: "MiComponente",
  data: () => ({
    miVariable: "Hello World",
	otraVariable: 20
  }) 
};
</script>

La otra sintaxis es así:

<script>
export default {
  name: "MiComponente",
  data: function () {
    return {
      miVariable: "Hello World",
	  otraVariable: 20
    }
  },
};
</script>

Hay que escribir más código, por eso no la recomiendo.

Lo único malo es que existe una limitación con ambas sintaxis. No puedes crear una variable que tenga o use el valor de otra variable que hayas declarado antes. Si tienes esa necesidad echa un ojo a las Computadas de Vue.

Variables no reactivas

Estas variables se suelen usar para crear constantes y valores que nunca cambien. No son reactivas y por lo tanto si cambian no actualizarán los otros datos del componente.

Para crear estas variables lo puedes hacer encima del export default del componente:

<script>
const variableEstatica = "Hello World";

export default {
  name: "MiComponente"
};
</script>

Pero ojo porque estas variables también tienen otra limitación, no se pueden usar dentro de el Sistema de vistas de Vue, tan solo la puedes usar dentro de la lógica del componente (para usarla pones el nombre de la variable sin usar el this).

Si por lo que sea tienes una variable de estas porque la importas desde un fichero o simplemente porque es estática y la quieres en la vista lo que tienes que hacer es meterla dentro del data, en este caso si que puedes crear la variable del data que dependa de una variable no reactiva, pero recuerda que una variable reactiva nunca puede depender de otra variable reactiva (para eso existen las computadas).

<script>
const variableEstatica = "Hello World";

export default {
  name: "MiComponente",
  data: () => ({
    variableEstatica
  }) 
};
</script>

En este caso me he permitido el lujo de poner simplemente el nombre de variableEstatica sin los dos puntos y el valor porque en los objetos de Javascript si la clave de un objeto coincide con el valor se puede poner así. Es decir, lo de arriba es igual que poner:

  data: () => ({
    variableEstatica: variableEstatica
  })