Watcher e reattività profonda
Reagisca alle modifiche dei dati con watcher e osservazione profonda.
Watcher e reattività profonda è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.
Che cos'è un watcher?
Un watcher esegue una funzione in risposta a una modifica dei dati.
- A differenza di computed, serve per gli effetti collaterali
- Recuperare dati, registrare informazioni, salvare nello storage
- Si reagisce quando cambia qualcosa di specifico
La funzione watch
La funzione watch riceve una sorgente da osservare e un callback che riceve il valore nuovo e quello precedente.
import { ref, watch } from "vue"
const query = ref("")
watch(query, (newVal, oldVal) => {
console.log("changed from", oldVal, "to", newVal)
})Un esempio pratico
Osservare un campo di ricerca per attivare una chiamata API quando cambia.
const search = ref("")
watch(search, async (newQuery) => {
const results = await fetchResults(newQuery)
items.value = results
})L'opzione immediate
Per impostazione predefinita, un watcher si attiva solo in caso di modifiche. L'opzione immediate lo esegue anche una volta immediatamente.
watch(userId, (id) => {
loadUser(id)
}, { immediate: true })
// Runs immediately with the current value,
// then again on every changeL'opzione deep
Per impostazione predefinita, l'osservazione di un oggetto si attiva solo quando cambia il riferimento. L'opzione deep osserva anche le proprietà annidate.
const profile = reactive({ name: "Ada", address: { city: "London" } })
watch(profile, (val) => {
console.log("profile changed")
}, { deep: true })
// Fires even when profile.address.city changesOsservare oggetti annidati
Senza deep, la modifica di una proprietà annidata di un oggetto reattivo osservato potrebbe non attivare il callback come previsto. deep garantisce che ciò avvenga, al costo di un lavoro maggiore.
- Utilizzare deep solo quando è davvero necessario monitorare le proprietà annidate
- Osservare in profondità oggetti di grandi dimensioni può essere costoso
Osservare un getter
Per osservare un valore annidato specifico, passare una funzione getter come sorgente.
watch(
() => profile.address.city,
(newCity) => {
console.log("city is now", newCity)
}
)Osservare più sorgenti
Passare un array di sorgenti per osservare più valori contemporaneamente.
watch([width, height], ([newW, newH], [oldW, oldH]) => {
console.log("size:", newW, "x", newH)
})watchEffect
watchEffect viene eseguito immediatamente e nuovamente ogni volta che cambia un valore reattivo letto al suo interno. Non è necessario specificare esplicitamente l'elenco delle sorgenti.
import { watchEffect } from "vue"
watchEffect(() => {
console.log("count is", count.value)
})
// Runs now, and again whenever count changeswatch a confronto con watchEffect
Come scegliere:
- watch: sorgente esplicita, fornisce i valori precedente e nuovo, non viene eseguito subito per impostazione predefinita
- watchEffect: tiene traccia automaticamente delle dipendenze, viene eseguito immediatamente, non fornisce il valore precedente
Utilizzare watch quando servono il valore precedente o un controllo preciso; usare watchEffect per maggiore praticità.
Watcher nell'Options API
L'Options API dichiara i watcher in un blocco watch identificato dal nome dei dati.
export default {
data() {
return { question: "" }
},
watch: {
question(newVal, oldVal) {
this.getAnswer(newVal)
}
}
}Verifica rapida
Verificare la propria comprensione dei watcher.
Riepilogo: watcher e reattività profonda
Ha imparato a reagire alle modifiche con effetti collaterali:
- watch osserva una sorgente e fornisce i valori nuovo e precedente
- immediate lo esegue una volta all'avvio
- deep tiene traccia delle modifiche agli oggetti annidati
- watchEffect tiene traccia automaticamente delle dipendenze e viene eseguito immediatamente
- Osservare più sorgenti con un array
Prossimo argomento: il routing con Vue Router.
Domande Frequenti
La lezione «Watcher e reattività profonda» è gratuita?
Sì — il testo completo di «Watcher e reattività profonda» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.
Cosa imparerò in «Watcher e reattività profonda»?
Reagisca alle modifiche dei dati con watcher e osservazione profonda. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.
Quanto tempo richiede la lezione «Watcher e reattività profonda»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Fondamenti della reattività
- Proprietà calcolate
- Watcher e reattività profonda