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
})
Artículos que mencionan a este:
Aprende a crear tus primeros componentes de VueJS
Hello World en Vue, descubre la estructura que tienen los componentes y cómo crearlos
Aprende todo lo relacionado con el sistema de vistas de Vue
Aprende a usar el sistema de vista y templates de vue. Echamos un vistazo a los bucles y a los condicionales para dotar a la vista de más dinamismo
Aprende a usar el ciclo de vida de Vue (created, mounted, destroyed...)
Aprende a controlar todo el proceso de creación, actualización y destrucción de los componentes.
Cómo crear y usar los props en Vue JS
Entiende cómo crear parámetros de entrada en los componentes en Vue, esencial para conseguir componentes más flexibles
Roadmap para aprender VueJS desde 0 y en español
VueJS es un framework para Javascript para crear páginas webs completas. Al estilo React pero mucho más sencillo de usar
Atributos, clases y estilos dinámicos en VueJS
Atributos en el HTML Con Vue tienes la posibilidad de poner atributos HTML como el src de una imagen de tal forma que su valor venga desde Variables...
Cómo crear un bindeo de variables con v-model de Vue
Con este tutorial aprenderás a conectar variables e inputs de forma reactiva
Cómo crear y usar propiedades computadas en Vue
En este artículo aprenderás a crear computed properties en Vue para poder tener valores que dependen de otros
Cómo crear y usar métodos en Vue
En este tutorial aprendemos a crear y utilizar los métodos en los componentes de Vue para poder ejecutarlos dentro del componente