Site Loader
Propiedades calculadas

En este tutorial de Vue Js se habla sobre las propiedades calculadas en Vue (computed properties). Esta funcionalidad nos permite realizar expresiones complejas, reutilizables y dinámicas de una forma muy sencilla en nuestros componentes.

Código

Posiblemente con la primera descripción no has llegado a imaginarte todo el potencial que tiene el uso de propiedades calculadas en Vue.Js. A continuación se van a introducir diferentes ejemplos para ver ejemplos reales y su uso.

Funcionamiento básico

El ejemplo que se ha propuesto en el siguiente código se encarga de invertir el orden de los caracteres que tiene la variable message.

<div id="app">
  <p>Result: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Como se puede apreciar a simple vista, se está haciendo uso de una expresión JavaScript que concatena diferentes funcionalidades nativas del lenguaje. Este código se podría haber escrito directamente en el template HTML. Sin embargo, pero de esta forma sería más difícil de mantener y no se podría reutilizar como si fuera una variable.

Por otra parte, hay que destacar que esta propiedad se calcula dinámicamente y en el momento en que el valor de la variable message sea actualizado la propiedad se actualizará.

Variable calculada frente a métodos

Después de ver el código anterior muchas personas habrán pensado que se puede obtener el mismo resultado pero utilizando un método. Esa afirmación es cierta, sin embargo, aunque el resultado visual sea el mismo, el rendimiento obtenido no es el mismo.

El código que se muestra a continuación es un ejemplo de cómo se puede obtener el mismo resultado que en el primer ejemplo.

<div id="app">
  <p>Result: "{{ reversedMessage() }}"</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  },
  methods: {
    reverseMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

La principal diferencia es que las propiedades computadas son cacheadas basándose en sus dependencias. Una propiedad calculada solo se volverá a recalcular cuando alguna de sus dependencias haya cambiado. Por lo tanto, hasta que la variable message no haya cambiado, si accedemos a la propiedad calculada reversedMessage devolverá el resultado calculado previamente sin tener que evaluar la expresión de nuevo.

Por otro lado, si optas por utilizar un método para realizar el desarrollo de tu componente. Cada vez que se realice un renderizado se ejecutará el método.

Funciones getters y setters

Las propiedades calculadas definen por defecto la función getter si utilizas la sintaxis abreviada. Sin embargo, es posible modificar el comportamiento de esta función y además añadir comportamiento a la función setter.

<div id="app">
  <p>Result: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  },
  computed: {
    reversedMessage: {
      get: function () {
        return this.message.split('').reverse().join('')
      },
      set: function (newValue) {
        this.message = newValue
      }
    }
  }
})

Al definir funcionamiento a la función setter se abre un abanico de posibilidades muy interesante. De esta forma se puede definir cierta lógica cada vez que se actualice el valor de la propiedad.

Un ejemplo muy interesante donde se puede utilizar esta funcionalidad es cuando estamos exponiendo una variable desde el store de vuex.

  ...
  computed: {
    reversedMessage: {
      get: function () {
        return this.$store.state.count
      },
      set: function (newValue) {
        this.$store.commit('increment')
      }
    }
  }
  ...

El código anterior sería un ejemplo de cómo se puede utilizar una variable global del store en un componente y además actualizar su información.

Hago hincapié en este punto, porque una de las reglas principales es que desde un componente no se puede modificar el store sin pasar por una mutación (store.commit()). Por lo tanto, si tienes una variable en un componente asociada a un input con su v-model. Si defines la función setter y haces un commit al store, se puede actualizar su información globalmente para todos los componentes. De esta forma, parece que se puede utilizar una variable del store como si fuera una variable local al componente y actualizar su información de forma sencilla.

Conclusión

El uso de esta funcionalidad es muy interesante a la hora de crear nuestros propios componentes en Vue. Nos permite realizar cálculos complejos y además definirlos de forma reutilizable muy fácilmente.

Por otra parte, en mi experiencia personal desarrollando en Vue. Cuando utilizas Vuex a la hora de publicar información global para toda la aplicación, tu mejor aliado son las propiedades calculadas. Como bien se ha mostrado en el tercer ejemplo del artículo, mediante una propiedad calculada y sobrecargando su función setter, se puede modificar el store de una forma muy sencilla.

En definitiva, el uso de variables calculadas para hacerte la vida más fácil y además aumentar tu rendimiento frente a utilizar métodos, es una muy buena idea en tus nuevos desarrollos con Vue.

Compartir en redes sociales:

Post Author: Vicente Javier González Llobet

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

LinkedIn
Share