PricingLoginStart free
Frontend Academy · Oppitunti

computed() ja watch()

Johda arvoja laiskasti computed()-funktiolla, reagoi tilan muutoksiin watch()- ja watchEffect()-funktioilla ja hallitse flush-ajoitusta

Oppitunti 2/413 vaihetta

computed() ja watch() on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

computed() Composition APIssa

computed(fn) luo vain luku -muotoisen reaktiivisen ref-arvon, joka johtaa arvonsa muista reaktiivisista lähteistä. Arvo tallennetaan välimuistiin — getter suoritetaan uudelleen vain, kun riippuvuudet muuttuvat.

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

Kirjoitettava computed()

Välittäkää get- ja set-funktiot sisältävä objekti kirjoitettavan computed-arvon luomiseksi. Setter käsittelee päivitykset ja yleensä välittää muutoksen takaisin lähde-ref-arvolle.

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

watch()-perusteet

watch(source, callback) suorittaa callback-funktion, kun lähde muuttuu. Callback saa parametrikseen uudet ja vanhat arvot.

import { ref, watch } from 'vue';

const query = ref('');

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

ref-arvon ja reactive-arvon tarkkailu

Reaktiivista ref-arvoa tarkkaillaan suoraan. Reaktiivisen ominaisuuden tarkkailuun käytetään getter-funktiota () => 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));

Syvä tarkkailu

Välittäkää { deep: true } objektin ref-arvon sisäkkäisten muutosten tarkkailemista varten.

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

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

Välitön tarkkailu

Välittäkää { immediate: true }, jotta callback suoritetaan heti alustuksen yhteydessä ennen muutoksia. Tämä on hyödyllistä, kun sivuvaikutus halutaan suorittaa alkuarvolla.

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

watchEffect()

watchEffect(fn) suorittaa callback-funktion heti ja suorittaa sen uudelleen aina, kun jokin sen sisällä käytetty reaktiivinen riippuvuus muuttuu. Lähteitä ei tarvitse määrittää erikseen.

import { watchEffect } from 'vue';

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

watchEffect ja watch

watchEffect: suoritetaan heti, seuraa riippuvuuksia automaattisesti eikä tarjoa pääsyä vanhaan arvoon. watch: lähteet määritetään erikseen, suoritetaan oletusarvoisesti viivästetysti ja tarjoaa pääsyn vanhoihin ja uusiin arvoihin. Käyttäkää watchEffect-funktiota deklaratiivisiin sivuvaikutuksiin ja watch-funktiota, kun tarvitsette hallintaa suorituksen ajankohtaan tai tiheyteen.

Tarkkailijoiden pysäyttäminen

Sekä watch että watchEffect palauttavat pysäytysfunktioin. Kutsukaa sitä tarkkailun lopettamiseksi.