Tutorial VueJS 3 – Propriedades calculadas com computed

Uma propriedade calculada é um valor derivado de outros valores. O Vue recalcula-o quando uma das suas dependências muda, e só nesse momento. É a ferramenta que mantém a lógica fora do template.

Um primeiro cálculo

A ficha tem de mostrar a marca e o produto. Podíamos fazê-lo no template:

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

Funciona, mas a lógica dispersa-se pelo HTML. Declara antes uma propriedade calculada:

<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>

O computed recebe uma função e devolve uma referência só de leitura. No script, lê-se title.value, no template, {{ title }}, tal como num ref.

A cache

É a verdadeira diferença face a uma função comum. Uma propriedade calculada guarda o seu resultado e só o recalcula se uma das suas dependências tiver mudado.

<!-- 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>

Numa concatenação, a diferença é nula. Numa ordenação ou num filtro aplicado a várias centenas de entradas, e mostrado em três sítios da página, torna-se evidente.

Comandar a variante selecionada

Passemos a um caso útil. Cada variante tem agora a sua própria quantidade em 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>

O azul está disponível, o vermelho não. A imagem mostrada e a disponibilidade dependem agora ambas da variante sob o rato. Em vez de manter duas variáveis atualizadas à mão, guardemos uma única informação: qual delas está selecionada.

<script setup>
const selectedVariant = ref(0)

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

O ciclo transmite o índice, obtido como no capítulo 4:

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

O resto deduz-se. O image e o inStock deixam de ser dados para passarem a ser cálculos:

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

Passa o rato sobre a pastilha vermelha: a imagem muda, a mensagem passa a «En rupture» e o botão fica cinzento graças à ligação de classe. Mexeu-se uma única variável, os três ecrãs acompanharam.

Quando usar uma propriedade calculada

• Para um valor derivado do estado: total de um carrinho, lista filtrada, texto montado. É o caso normal.
• Não para um efeito secundário. Uma propriedade calculada tem de ser uma função pura: lê e devolve. Não altera nada, não chama uma API, não dispara um pedido. Para isso existem o watch e o watchEffect.
• Não para um valor que muda sozinho, como a hora atual: nada avisaria o Vue de que é preciso recalcular.

Uma propriedade calculada em escrita

Por omissão, uma propriedade calculada é só de leitura. O Vue avisa na consola se lhe tentares atribuir um valor. Para os casos em que a escrita faz sentido, fornece um par get / set:

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