onUpdated et onBeforeUpdate
Réaction aux changements des données réactives, prévention des boucles infinies de mise à jour dans onUpdated.
onUpdated et onBeforeUpdate est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Fonctions autour des mises à jour
Lorsque les données réactives changent, Vue effectue de nouveau le rendu du composant. Deux fonctions encadrent cette opération : onBeforeUpdate s’exécute avant la mise à jour du DOM et onUpdated après.
onUpdated : après la mise à jour
onUpdated s’exécute une fois que le DOM a été mis à jour pour refléter le nouvel état réactif. À ce stade, le DOM rendu correspond à vos données.
<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
console.log('DOM is now up to date')
})
</script>Lire le DOM mis à jour
La mise à jour étant terminée, onUpdated est l’endroit approprié pour lire les nouvelles dimensions ou positions des éléments qui dépendent du dernier rendu.
<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
console.log(list.value.scrollHeight)
})
</script>Le piège de la boucle infinie
Ne modifiez jamais l’état réactif dans onUpdated. Cela déclenche un nouveau rendu, qui exécute de nouveau onUpdated, qui modifie à nouveau l’état — une boucle infinie qui bloque l’application.
<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
count.value++ // BAD: infinite update loop
})
</script>Utiliser la surveillance à la place
Si vous souhaitez réagir à la modification d’une valeur précise, utilisez watch plutôt que onUpdated. Une surveillance cible une seule source et évite le risque de boucle, tandis que onUpdated s’exécute à chaque rendu.
watch(count, (newVal) => {
console.log('count became', newVal)
})onBeforeUpdate : avant la mise à jour
onBeforeUpdate s’exécute après une modification réactive, mais avant que Vue ne mette à jour le DOM. Le DOM affiche encore les anciennes valeurs.
<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
console.log('DOM still has old values')
})
</script>Cas d’utilisation : instantané avant la mise à jour
Comme onBeforeUpdate voit l’ancien DOM, cette fonction est idéale pour capturer un instantané avant la modification — par exemple, enregistrer la position actuelle du défilement afin de la restaurer après la mise à jour.
<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>Elles s’exécutent à chaque rendu
Les deux fonctions s’exécutent à chaque cycle de mise à jour, ce qui peut être fréquent. Gardez leurs fonctions de rappel légères afin d’éviter les problèmes de performance.
Pas pour les effets secondaires des données
Ces fonctions concernent le DOM, pas vos données. Pour les réactions pilotées par les données, préférez computed (pour les valeurs dérivées) ou watch (pour les effets secondaires liés à des sources précises).
Récapitulatif de l’ordre
Lorsqu’une modification réactive survient, la séquence est la suivante : l’état change, onBeforeUpdate s’exécute (ancien DOM), Vue met à jour le DOM, puis onUpdated s’exécute (nouveau DOM).
Choisir entre les deux
- onBeforeUpdate : capturer l’ancien état du DOM, comme le défilement ou la sélection.
- onUpdated : lire le nouveau DOM après sa mise à jour — mais ne modifiez jamais l’état réactif ici.
Vérification rapide
Testez vos connaissances sur les fonctions de mise à jour.
Récapitulatif
Résumé des fonctions de mise à jour :
onUpdateds’exécute après la mise à jour du DOM — lisez-y les nouvelles dimensions.- Ne modifiez jamais l’état réactif à l’intérieur (boucle infinie) ; utilisez plutôt
watch. onBeforeUpdates’exécute avant la mise à jour avec l’ancien DOM — idéal pour les instantanés.- Les deux fonctions s’exécutent à chaque rendu ; gardez-les donc légères.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « onUpdated et onBeforeUpdate » est-elle gratuite ?
Oui — le texte complet de « onUpdated et onBeforeUpdate » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « onUpdated et onBeforeUpdate » ?
Réaction aux changements des données réactives, prévention des boucles infinies de mise à jour dans onUpdated. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « onUpdated et onBeforeUpdate » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Vue d’ensemble des phases du cycle de vie
- onMounted et onBeforeMount
- onUpdated et onBeforeUpdate
- onUnmounted et stratégies de nettoyage