Kurs Vue 3: właściwości obliczane i mechanizm cache’owania

Właściwość obliczana to wartość wyprowadzona z innych wartości. Vue przelicza ją, gdy zmienia się któraś z jej zależności, i tylko wtedy. To narzędzie, które trzyma logikę poza szablonem.

Pierwsze obliczenie

Karta produktu ma pokazywać markę i nazwę produktu. Dałoby się to zrobić w szablonie:

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

Działa, ale logika rozprasza się po HTML-u. Zadeklaruj zamiast tego właściwość obliczaną:

<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 przyjmuje funkcję i zwraca referencję tylko do odczytu. W skrypcie czytasz title.value, a w szablonie {{ title }}, dokładnie jak w przypadku ref.

Cache’owanie wyniku

To prawdziwa różnica względem zwykłej funkcji. Właściwość obliczana zapamiętuje swój wynik i przelicza go tylko wtedy, gdy zmieniła się któraś z zależności.

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

Przy sklejaniu dwóch napisów różnicy nie ma żadnej. Przy sortowaniu albo filtrowaniu kilkuset pozycji, wyświetlanym w trzech miejscach strony, robi się wyraźna.

Sterowanie wybranym wariantem

Przejdźmy do użytecznego przypadku. Każdy wariant ma teraz własny stan magazynowy:

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

Niebieski jest dostępny, czerwony nie. Wyświetlany obraz oraz dostępność zależą teraz od tego samego: od wariantu pod kursorem. Zamiast ręcznie utrzymywać dwie zmienne, zapamiętajmy jedną informację, który wariant jest wybrany.

<script setup>
const selectedVariant = ref(0)

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

Pętla przekazuje indeks, pobierany tak jak w rozdziale 4:

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

Resztę da się wyprowadzić. image i inStock przestają być danymi, a stają się obliczeniami:

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

Najedź kursorem na czerwoną kropkę: obraz się zmienia, komunikat przeskakuje na „En rupture”, a przycisk szarzeje dzięki wiązaniu klasy. Ruszyła jedna zmienna, a trzy elementy poszły za nią.

Kiedy sięgać po właściwość obliczaną

• Do wartości wyprowadzonej ze stanu: sumy koszyka, przefiltrowanej listy, sklejonego tekstu. To przypadek podstawowy.
• Nie do efektu ubocznego. Właściwość obliczana ma być funkcją czystą: czyta i zwraca. Niczego nie zmienia, nie woła API, nie wysyła żądania. Od tego są watch i watchEffect.
• Nie do wartości, która zmienia się sama, jak bieżąca godzina: nic nie powiadomiłoby Vue, że trzeba ją przeliczyć.

Właściwość obliczana do zapisu

Domyślnie właściwość obliczana jest tylko do odczytu. Vue ostrzega w konsoli, jeśli spróbujesz przypisać jej wartość. Tam, gdzie zapis ma sens, podaj parę get / set:

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