0Pricing
Frontend Academy · Lezione

computed() e watch()

Derivare i valori in modo lazy con computed(), reagire alle modifiche dello stato con watch() e watchEffect() e controllare la temporizzazione del flush.

computed() e watch() è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

computed() nella Composition API

computed(fn) crea una ref reattiva di sola lettura che deriva il proprio valore da altre sorgenti reattive. Il valore viene memorizzato nella cache: il getter viene eseguito solo quando cambiano le dipendenze.

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

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

computed() scrivibile

Passi un oggetto con get e set per creare una computed scrivibile. Il setter gestisce gli aggiornamenti, in genere riportando la modifica nella ref sorgente.

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

Nozioni di base su watch()

watch(source, callback) esegue il callback quando cambia la sorgente. Il callback riceve i valori nuovo e precedente.

import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log(`Changed from '${oldVal}' to '${newVal}'`);
  searchAPI(newVal);
});

Osservare una ref o un oggetto reactive

Osservi direttamente una ref. Per osservare una proprietà reattiva, utilizzi una funzione getter () => state.prop.

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

Osservazione profonda

Passi { deep: true } per osservare le modifiche annidate in una ref che contiene un oggetto.

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

Osservazione immediata

Passi { immediate: true } per eseguire immediatamente il callback durante la configurazione, prima che avvenga qualsiasi modifica. È utile quando vuole eseguire un effetto collaterale con il valore iniziale.

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn) esegue immediatamente il callback e lo riesegue ogni volta che cambia una dipendenza reattiva utilizzata al suo interno. Non è necessario specificare esplicitamente le sorgenti.

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffect e watch

watchEffect: immediato, rileva automaticamente le dipendenze, non consente di accedere al valore precedente. watch: sorgenti esplicite, lazy per impostazione predefinita, consente di accedere ai valori precedente e nuovo. Utilizzi watchEffect per effetti collaterali dichiarativi; utilizzi watch quando ha bisogno di controllare quando e quanto spesso viene eseguito.

Arrestare i watcher

Sia watch sia watchEffect restituiscono una funzione di arresto. La chiami per interrompere l'osservazione. In