Cómo crear y usar propiedades computadas en Vue

Las propiedades computadas o computed properties son una característica muy interesante de Vue.
Básicamente una computada es una variable, la diferencia con las Variables de Vue es que las computadas normalmente transforman la variable o hacen algún tipo de cálculo antes de devolverla.
Además resuelve el problema que vimos de que no puedes crear una variable que tenga el valor de otra variable del data.
Esto de las computadas es como los típicos getters de otros lenguajes de programación. Básicamente son funciones que devuelven un valor del componente y antes hace algún cálculo o transformación.
Ejemplo típico, tienes una variable en el data con un número y necesitas una variable que sea el doble de esa variable.
Para esto podrías usar perfectamente los Métodos de Vue, simplemente creas uno que pille el valor y lo devuelva, pero tienes un problema, como ya vimos, si la variable del data la cambias en otro sitio del componente, el método NO se vuelve a ejecutar de forma automática.
Cómo se crean las computadas y las restricciones que tienen
Este ejemplo con las computadas se haría así:
<template>
<div class="content">
{{double}}
</div>
</template>
<script>
export default {
data: () => ({
value: 20
}),
computed: {
double() {
return this.value * 2;
}
}
};
</script>
<style scoped></style>
Como en los métodos, dentro del objeto computed creamos todas funciones separadas por comas.
Dentro de cada computada con el this accedemos a los valores del data o a los métodos que necesitemos. Las computadas siempre van a usar variables del data o otras computadas.
Es importante saber que las computadas nunca pueden recibir un parámetro desde fuera de la función. Si necesitas pasar un valor a una computada tienes que crear un método.
Es decir, esto NO se puede hacer:
<script>
export default {
data: () => ({
value: 20
}),
computed: {
double(anotherAmount) {
return this.value * anotherAmount;
}
}
};
</script>
Otra cosa importante de las computadas es que siempre tienen que devolver un valor. No puede existir computada sin return.
Cómo se usan las computadas
Las computadas se comportan igual que las variables, incluso en su sintaxis, ya que para llamar a una computada no hay que poner el (), aunque se trate de una función, por ejemplo, una computada que usa otra computada:
<script>
export default {
data: () => ({
value: 20
}),
computed: {
plusOne() {
return this.value + 1;
}
double() {
return this.plusOne * 2;
}
}
};
</script>
Mira la diferencia de sintaxis entre una computada y un método:
<template>
<div class="content">
{{double}} - {{calculate()}}
</div>
</template>
<script>
export default {
data: () => ({
value: 20
}),
computed: {
double() {
return this.value * 2;
}
},
methods: {
calculate() {
return this.double + 1;
}
}
};
</script>
<style scoped></style>
Además, las variables computadas son reactivas también y actualizarán su valor cuando una de las variables o computadas de su interior cambie.
Cómo se usa las computadas desde los métodos
También puedes llamar a computadas desde métodos:
<script>
export default {
data: () => ({
value: 20
}),
computed: {
double() {
return this.value * 2;
}
},
methods: {
print() {
console.log(this.double);
}
};
</script>
<style scoped></style>
Y eso es un poco todo respecto a las computadas. Si tienes dudas con los métodos te recomiendo que le eches un ojo al artículo de Diferencias entre computadas y métodos en Vue para que sepas bien qué diferencia hay entre ambos términos y cuándo usar cada cosa.
Artículos que mencionan a este:
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.
Qué son los filters de Vue y cómo se usan
Aprende a crear y usar tus propios filters de Vue para poder dar formato a la vista de una forma muy sencilla
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 variables reactivas con Vue
Aprende a crear variables reactivas en Vue para usarlas en la vista y a crear variables estáticas, para mejorar performance
Cómo escuchar eventos nativos en Vue (click, mouseover, wheel...)
Vue tiene una sintaxis muy cómoda para poder escuchar los eventos que ofrecen los navegadores de forma nativa, en este artículo aprendemoos a usarlos
Aprende las diferencias entre computadas y métodos en Vue
Si recientemente has aprendido a usar métodos y computadas te recomiendo este artículo para que aprendas las diferencias entre ambos