Vue Academy · Lezione

onUpdated e onBeforeUpdate

Reazione alle modifiche dei dati reattivi, prevenzione dei cicli di aggiornamento infiniti in onUpdated

onUpdated e onBeforeUpdate è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Hook relativi agli aggiornamenti

Quando i dati reattivi cambiano, Vue esegue nuovamente il rendering del componente. Due hook delimitano questa fase: onBeforeUpdate viene eseguito prima del patch del DOM, mentre onUpdated viene eseguito dopo.

onUpdated: dopo il patch

onUpdated viene eseguito quando il DOM è stato aggiornato per riflettere il nuovo stato reattivo. A questo punto il DOM renderizzato corrisponde ai dati.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Leggere il DOM aggiornato

Poiché il patch è completato, onUpdated è il posto giusto per leggere le nuove dimensioni o posizioni degli elementi che dipendono dall'ultimo rendering.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

Il rischio del ciclo infinito

Non modifichi mai lo stato reattivo all'interno di onUpdated. In questo modo attiverebbe un altro rendering, che eseguirebbe di nuovo onUpdated, che modificherebbe nuovamente lo stato: si crea un ciclo infinito che blocca l'app.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Utilizzi watch invece

Se desidera reagire alla modifica di un valore specifico, utilizzi watch, non onUpdated. Un watch osserva una singola sorgente ed evita il rischio di cicli, mentre onUpdated viene eseguito a ogni rendering.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: prima del patch

onBeforeUpdate viene eseguito dopo una modifica reattiva, ma prima che Vue applichi il patch al DOM. In questo momento il DOM mostra ancora i valori precedenti.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Caso d'uso: acquisire uno snapshot prima dell'aggiornamento

Poiché onBeforeUpdate vede il DOM precedente, è perfetto per acquisire uno snapshot prima della modifica, ad esempio memorizzando la posizione di scorrimento corrente per ripristinarla dopo l'aggiornamento.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

Vengono eseguiti a ogni rendering

Entrambi gli hook vengono eseguiti a ogni ciclo di aggiornamento, che può essere frequente. Mantenga leggere le relative callback per evitare problemi di prestazioni.

Non per gli effetti collaterali sui dati

Questi hook riguardano il DOM, non i dati. Per le reazioni guidate dai dati, preferisca computed (per i valori derivati) o watch (per gli effetti collaterali su sorgenti specifiche).

Riepilogo dell'ordine

In seguito a una modifica reattiva, la sequenza è: lo stato cambia, viene eseguito onBeforeUpdate (DOM precedente), Vue applica il patch al DOM, quindi viene eseguito onUpdated (DOM aggiornato).

Quale scegliere

onBeforeUpdate: acquisire lo stato del DOM precedente, ad esempio lo scorrimento o la selezione.
onUpdated: leggere il nuovo DOM dopo il patch, ma non modificare mai qui lo stato reattivo.

Verifica rapida

Metta alla prova le Sue conoscenze sugli hook di aggiornamento.

Riepilogo

Riepilogo degli hook di aggiornamento:

onUpdated viene eseguito dopo il patch del DOM: legga qui le nuove dimensioni.
Non modifichi mai lo stato reattivo al suo interno (si creerebbe un ciclo infinito); utilizzi invece watch.
onBeforeUpdate viene eseguito prima del patch, quando il DOM è ancora quello precedente: è ideale per acquisire snapshot.
Entrambi vengono eseguiti a ogni rendering, quindi li mantenga leggeri.

Domande Frequenti

La lezione «onUpdated e onBeforeUpdate» è gratuita?

Sì — il testo completo di «onUpdated e onBeforeUpdate» è 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 4 lezioni in totale.

Cosa imparerò in «onUpdated e onBeforeUpdate»?

Reazione alle modifiche dei dati reattivi, prevenzione dei cicli di aggiornamento infiniti in onUpdated 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 4.

Quanto tempo richiede la lezione «onUpdated e onBeforeUpdate»?

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

← Torna a Vue Academy