Propiedades computadas en VueJS

En ocasiones, nuestros componentes muestran una lógica más complejas que en casos normales y debemos hacer uso de propiedades computadas.

¿Por qué debemos utilizar propiedades computadas?

Podemos hacer uso de las propiedades computadas cuando la expresión que queremos mostrar en nuestra plantilla no es tan simple como de costumbre, como sería mostrar el valor de una variable. Un ejemplo claro de donde deberíamos mostrar estas propiedades, sería en este expresión que encontramos en la documentación del framework:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

De esta forma, la variable mensaje se vería afectada por los tres método mostrando el valor final. Esta forma no es nada óptima para trabajar, ya que si quisiéramos mostrar ésta expresión deberíamos escribir una y otra 

• Si quisiéramos mostrar la expresión, deberíamos escribir un y otra vez su lógica.
• Si en un futuro quisieramos modificar la logica, deberíamos modificarla en todos los sitios donde hayamos utilizado esta expresión.
• No es nada legible, ya que deberíamos tomarnos un tiempo para entender que estamos haciendo.

Utilizando la propiedad computada

Es muy sencillo crear una propiedad computada ya que apenas se diferencia de la creación de métodos, y sería de esta forma:

const app = new Vue({

    el:'#app',
    data:{
        mensaje:"contenido",
    },
    computed: {
       ejemplo(){
           return this.mensaje.split('').reverse().join('');
       },
});

y lo llamariamos en la plantilla como si de una función se tratase:

<div id="example">
  {{ ejemplo }}
</div>

¿Cuando utilizar las propiedades computadas antes que los métodos?

Una opción que pensaríamos muchos, en el caso que no conociéramos las propiedades computadas, sería la de utilizar métodos. Algo así:

methods: {
        ejemplo(){
            return this.message.split('').reverse().join('')
        },
},

y llamando a este metodo en la plantilla:

<div id="example">
  {{ ejemplo() }}
</div>

La diferencia entre esto y utilizar las propiedades computadas es que sería más óptimo trabajar con éstas, ya que se cachea su valor y al contrario de los métodos, no se llaman cada vez que se renderiza la plantilla a menos que cambie su valor. Esto no tendría mucha importancia cuando no sea excesivo el número de veces que se llama al método.

¡Y esto sería todo! Empieza ahora a optimizar tus aplicaciones Vue.js con esta propiedad.