Tutorial VueJS 3 – Propiedades computadas con computed

Una propiedad computada es un valor derivado de otros valores. Vue lo recalcula cuando cambia una de sus dependencias, y solo en ese momento. Es la herramienta que mantiene la lógica fuera de la plantilla.

Un primer cálculo

La ficha tiene que mostrar la marca y el producto. Se podría hacer en la plantilla:

<h1>{{ brand + ' ' + product }}</h1>

Funciona, pero la lógica se dispersa por el HTML. Declara mejor una propiedad computada:

<script setup>
import { computed, ref } from 'vue'

const product = ref('T-Shirt')
const brand = ref('Gekkode')

const title = computed(() => `${brand.value} ${product.value}`)
</script>

<template>
  <h1>{{ title }}</h1>
</template>

computed recibe una función y devuelve una referencia de solo lectura. En el script se lee title.value, en la plantilla, {{ title }}, igual que con un ref.

La caché

Es la verdadera diferencia con una función normal. Una propiedad computada guarda su resultado y solo lo recalcula si ha cambiado alguna de sus dependencias.

<!-- appelée à chaque rendu, même si rien n’a changé -->
<p>{{ calculerTitre() }}</p>

<!-- calculée une fois, puis relue depuis le cache -->
<p>{{ title }}</p>

En una concatenación, la diferencia es nula. En una ordenación o un filtro aplicados a varios cientos de entradas, y mostrados en tres sitios de la página, se nota mucho.

Controlar la variante seleccionada

Pasemos a un caso útil. Ahora cada variante tiene su propia cantidad en stock:

<script setup>
const variants = ref([
  { id: 2234, color: '#2563eb', image: '/images/t-shirt-bleu.svg', quantity: 20 },
  { id: 2235, color: '#dc2626', image: '/images/t-shirt-rouge.svg', quantity: 0 }
])
</script>

El azul está disponible, el rojo no. La imagen mostrada y la disponibilidad dependen ahora las dos de la variante sobre la que pasa el ratón. En lugar de mantener dos variables al día a mano, guardemos un único dato: cuál está seleccionada.

<script setup>
const selectedVariant = ref(0)

function updateVariant(index) {
  selectedVariant.value = index
}
</script>

El bucle transmite el índice, recuperado como en el capítulo 4:

<div
  v-for="(variant, index) in variants"
  :key="variant.id"
  class="color-circle"
  :style="{ backgroundColor: variant.color }"
  @mouseover="updateVariant(index)"
></div>

El resto se deduce. image e inStock ya no son datos, sino cálculos:

<script setup>
const image = computed(() => variants.value[selectedVariant.value].image)
const inStock = computed(() => variants.value[selectedVariant.value].quantity > 0)
</script>

Pasa el ratón por el círculo rojo: la imagen cambia, el mensaje pasa a «En rupture» y el botón se atenúa gracias a la vinculación de clases. Solo ha cambiado una variable, los tres elementos la han seguido.

Cuándo usar una propiedad computada

• Un valor derivado del estado: total de un carrito, lista filtrada, texto montado. Es el caso normal.
• No para un efecto secundario. Una propiedad computada debe ser una función pura: lee y devuelve. No modifica nada, no llama a ninguna API, no dispara ninguna petición. Para eso están watch y watchEffect.
• No para un valor que cambia solo, como la hora actual: nada avisaría a Vue de que hay que recalcular.

Una propiedad computada de escritura

Por defecto, una propiedad computada es de solo lectura. Vue avisa en la consola si intentas asignarle un valor. Para los casos en los que escribir tiene sentido, proporciona un par get / set:

const nomComplet = computed({
  get: () => `${prenom.value} ${nom.value}`,
  set: (valeur) => {
    [prenom.value, nom.value] = valeur.split(' ')
  }
})