onMounted et onBeforeMount
Accès au DOM dans onMounted, raisons pour lesquelles onBeforeMount nécessite rarement une utilisation directe.
onMounted et onBeforeMount est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 du montage
La phase de montage comporte deux fonctions de cycle de vie : onBeforeMount s’exécute juste avant la création du DOM, et onMounted s’exécute juste après son insertion. Elles se ressemblent, mais répondent à des besoins très différents.
onMounted : le DOM est prêt
Lorsque onMounted s’exécute, le modèle du composant a été rendu et se trouve dans la page. Les références du modèle pointent vers de vrais éléments ; c’est donc ici que doivent avoir lieu les manipulations du DOM.
<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
console.log(box.value.offsetWidth)
})
</script>Cas d’utilisation : initialiser un graphique
Les bibliothèques qui dessinent dans un élément du DOM ont d’abord besoin que cet élément existe. Initialisez-les dans onMounted en transmettant l’élément référencé.
<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
const ctx = canvas.value.getContext('2d')
// draw chart with ctx
})
</script>Cas d’utilisation : mesurer le DOM
La lecture des dimensions, des positions ou des décalages de défilement nécessite un DOM réel. onMounted est le premier moment où vous pouvez mesurer un élément en toute sécurité.
onMounted(() => {
const rect = box.value.getBoundingClientRect()
console.log(rect.height)
})Cas d’utilisation : récupérer les données initiales
Récupérer les données lorsque le composant apparaît est une tâche classique pour onMounted. Stockez le résultat dans une référence réactive afin que le modèle se mette à jour à son arrivée.
<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
const res = await fetch('/api/posts')
posts.value = await res.json()
})
</script>onMounted s’exécute une seule fois
onMounted s’exécute une seule fois par instance de composant. Si le composant est démonté puis recréé, la nouvelle instance exécute son propre onMounted.
onBeforeMount : juste avant l’insertion
onBeforeMount s’exécute après la configuration, mais avant la création du DOM. L’état réactif existe, mais les références du modèle valent encore null, car rien n’a encore été rendu.
<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
console.log('about to render')
})
</script>Pourquoi onBeforeMount est rarement nécessaire
La plupart des opérations de configuration peuvent être effectuées directement dans <script setup> (qui s’exécute déjà avant le montage), et tout ce qui concerne le DOM doit attendre onMounted. onBeforeMount a donc peu d’utilisations pratiques.
Une erreur fréquente
Accéder à une référence du modèle dans la configuration ou dans onBeforeMount renvoie null. L’élément n’existe pas tant que le montage n’est pas terminé. Déplacez toujours l’accès au DOM dans onMounted.
<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>Enregistrer plusieurs fonctions
Vous pouvez appeler onMounted plusieurs fois ; toutes les fonctions de rappel s’exécutent dans l’ordre. C’est pourquoi les fonctions composables peuvent chacune enregistrer leur propre onMounted indépendamment.
onMounted(() => console.log('first'))
onMounted(() => console.log('second'))Choisir entre les deux
- onMounted : DOM disponible — graphiques, mesures, mise au point, récupération de données.
- onBeforeMount : fonction avant le rendu, sans DOM, rarement nécessaire.
Vérification rapide
Testez vos connaissances sur les fonctions de montage.
Récapitulatif
Résumé des fonctions de montage :
onMounteds’exécute après l’insertion du DOM — utilisez-le pour initialiser des graphiques, effectuer des mesures, donner la mise au point et récupérer les données initiales.- Il s’exécute une fois par instance et peut être enregistré plusieurs fois.
onBeforeMounts’exécute avant le rendu, sans accès au DOM, et est rarement nécessaire.
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 « onMounted et onBeforeMount » est-elle gratuite ?
Oui — le texte complet de « onMounted et onBeforeMount » 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 « onMounted et onBeforeMount » ?
Accès au DOM dans onMounted, raisons pour lesquelles onBeforeMount nécessite rarement une utilisation directe. 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 2 sur 4.
Combien de temps prend la leçon « onMounted et onBeforeMount » ?
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