Watcherit ja syvä reaktiivisuus
Reagoikaa datan muutoksiin watchereilla ja syvällä seurannalla
Watcherit ja syvä reaktiivisuus on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 3 oppituntia.
Mikä on tarkkailija?
Tarkkailija suorittaa funktion vastauksena datan muutokseen.
- Toisin kuin computed, sitä käytetään sivuvaikutuksiin
- Datan hakemiseen, lokitietojen kirjoittamiseen ja tallennustilaan tallentamiseen
- Reagoit, kun jokin tietty asia muuttuu
watch-funktio
watch-funktio vastaanottaa tarkkailtavan lähteen ja callback-funktion, joka saa uudet ja vanhat arvot.
import { ref, watch } from "vue"
const query = ref("")
watch(query, (newVal, oldVal) => {
console.log("changed from", oldVal, "to", newVal)
})Käytännön esimerkki
Hakukentän tarkkailu API-kutsun käynnistämiseksi, kun sen arvo muuttuu.
const search = ref("")
watch(search, async (newQuery) => {
const results = await fetchResults(newQuery)
items.value = results
})immediate-asetus
Oletusarvoisesti tarkkailija suoritetaan vain muutosten yhteydessä. immediate-asetus suorittaa sen myös heti kerran.
watch(userId, (id) => {
loadUser(id)
}, { immediate: true })
// Runs immediately with the current value,
// then again on every changedeep-asetus
Oletusarvoisesti olion tarkkailu reagoi vain viitemuutoksiin. deep-asetus tarkkailee myös sisäkkäisiä ominaisuuksia.
const profile = reactive({ name: "Ada", address: { city: "London" } })
watch(profile, (val) => {
console.log("profile changed")
}, { deep: true })
// Fires even when profile.address.city changesSisäkkäisten olioiden tarkkailu
Ilman deep-asetusta tarkkailtavan reaktiivisen olion sisäkkäisen ominaisuuden muuttuminen ei välttämättä käynnistä callback-funktiota odotetusti. deep varmistaa tämän, mutta vaatii enemmän työtä.
- Käyttäkää deep-asetusta vain, kun todella tarvitsette sisäkkäisten ominaisuuksien seurantaa
- Suurten olioiden tarkkailu deep-asetuksella voi olla raskasta
Getter-funktion tarkkailu
Tietyn sisäkkäisen arvon tarkkailemiseksi välittäkää lähteeksi getter-funktio.
watch(
() => profile.address.city,
(newCity) => {
console.log("city is now", newCity)
}
)Useiden lähteiden tarkkailu
Välittäkää tarkkailtavat arvot taulukkona, jotta voitte tarkkailla useita arvoja kerralla.
watch([width, height], ([newW, newH], [oldW, oldH]) => {
console.log("size:", newW, "x", newH)
})watchEffect
watchEffect suoritetaan heti uudelleen ja aina, kun jokin sen lukema reaktiivinen arvo muuttuu. Erillistä lähdeluetteloa ei tarvita.
import { watchEffect } from "vue"
watchEffect(() => {
console.log("count is", count.value)
})
// Runs now, and again whenever count changeswatch vai watchEffect
Valinta niiden välillä:
- watch käyttää eksplisiittistä lähdettä, antaa vanhat ja uudet arvot ja on oletusarvoisesti laiska
- watchEffect seuraa riippuvuuksia automaattisesti, suoritetaan heti eikä anna vanhaa arvoa
Käyttäkää watch-funktiota, kun tarvitsette edellisen arvon tai tarkkaa hallintaa; käyttäkää watchEffect-funktiota helppokäyttöisyyden vuoksi.
Tarkkailijat Options API:ssa
Options API:ssa tarkkailijat määritellään watch-lohkossa, jonka avaimina ovat datan nimet.
export default {
data() {
return { question: "" }
},
watch: {
question(newVal, oldVal) {
this.getAnswer(newVal)
}
}
}Pikatesti
Testatkaa, miten hyvin ymmärrätte tarkkailijoita.
Kertaus: tarkkailijat ja syvä reaktiivisuus
Opitte reagoimaan muutoksiin sivuvaikutusten avulla:
- watch tarkkailee lähdettä ja antaa uudet ja vanhat arvot
- immediate suorittaa sen kerran alussa
- deep seuraa sisäkkäisten olioiden muutoksia
- watchEffect seuraa riippuvuuksia automaattisesti ja suoritetaan heti
- Useita lähteitä voi tarkkailla taulukon avulla
Seuraavaksi: reititys Vue Routerilla.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 42
- Oppitunnit
- 156
Usein kysytyt kysymykset
Onko oppitunti ”Watcherit ja syvä reaktiivisuus” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Watcherit ja syvä reaktiivisuus”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Watcherit ja syvä reaktiivisuus”?
Reagoikaa datan muutoksiin watchereilla ja syvällä seurannalla Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/3.
Kuinka kauan ”Watcherit ja syvä reaktiivisuus”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?
Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Reaktiivisuuden perusteet
- Computed-ominaisuudet
- Watcherit ja syvä reaktiivisuus