Propiedades calculadas de Vue.js

Aprenda cómo puede usar Vue Computed Properties para almacenar en caché los cálculos


¿Qué es una propiedad calculada?

En Vue.js puede generar cualquier valor de datos usando paréntesis:

<template>
  <p>{{ count }}</p>
</template>

<script> export default { data() { return { count: 1 } } } </script>

Esta propiedad puede albergar algunos pequeños cálculos, por ejemplo

<template>
  {{ count * 10 }}
</template>

pero estás limitado a un solo JavaScriptexpresión.

Además de esta limitación técnica, también debe tener en cuenta que las plantillas solo deben preocuparse por mostrar datos al usuario, no realizar cálculos lógicos.

Para hacer algo más con una sola expresión, y para tener más plantillas declarativas, usa unpropiedad calculada.

Las propiedades calculadas se definen en elcomputedpropiedad del componente Vue:

<script>
export default {
  computed: {

} } </script>

Un ejemplo de una propiedad calculada

Aquí hay un código de ejemplo que usa una propiedad calculadacountpara calcular la salida. Aviso:

  1. No tuve que llamarcount(). Vue.js invoca automáticamente la función
  2. Usé una función regular (no una función de flecha) para definir elcountpropiedad calculada porque necesito poder acceder a la instancia del componente a través dethis.

    <template>
    <p>{{ count }}</p>
    </template>
    

    <script> export default { data() { return { items: [1, 2, 3] } }, computed: { count: function() { return 'The count is ’ + this.items.length * 10 } } } </script>

Propiedades calculadas vs métodos

Si ya lo sabesMétodos vue, puede que se pregunte cuál es la diferencia.

Primero, los métodos deben ser llamados, no solo referenciados, por lo que necesitaría llamarcount()en vez decountSi tienes uncountmétodo:

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    }
  },
  methods: {
    count: function() {
      return 'The count is ' + this.items.length * 10
    }
  }
}
</script>

Pero la principal diferencia es quelas propiedades calculadas se almacenan en caché.

El resultado de lacountLa propiedad calculada se almacena en caché internamente hasta queitemscambios en las propiedades de los datos.

Importante: las propiedades calculadas sonsolo se actualiza cuando se actualiza una fuente reactiva. Los métodos regulares de JavaScript no son reactivos, por lo que un ejemplo común es usarDate.now():

<template>
  <p>{{ now }}</p>
</template>

<script> export default { computed: { now: function () { return Date.now() } } } </script>

Se renderizará una vez y luego no se actualizará incluso cuando el componente se vuelva a renderizar. Solo en una actualización de página, cuando el componente Vue se cierra y se reinicia.

En este caso, un método se adapta mejor a sus necesidades.

Descarga mi gratisManual de Vue


Más tutoriales de vue: