Une exploration approfondie des mécanismes de cycle de vie dans Vue 3, intégrant les approches Composition API et Options API pour une compréhension optimale :

Vue d'ensemble des hooks de cycle de vie

Hooks avec Composition API

Hooks de débogage supplémentaires

• onRenderTracked : déclenché quand une dépendance réactive est suivie
• onRenderTriggered : déclenché quand une dépendance réactive provoque un re-rendu

Phases clés du cycle de vie

Phase d'initialisation (Setup)

import { onMounted } from 'vue'

function initComponent() {
  const setupLogic = () => {
    console.log('Composant initialisé')
  }
  onMounted(setupLogic)
}

Dans Composition API, les hooks sont enregistrés dans setup(), mais leur exécution suit le même calendrier qu'avec Options API.

Phase de mise à jour

• Ordre d'exécution : beforeUpdate → rendu du DOM virtuel → updated
• Utilisation typique : accéder à l'état du DOM avant la mise à jour dans beforeUpdate, manipuler le DOM mis à jour dans updated

Phase de nettoyage

onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId) // Nettoyage obligatoire des effets de bord
  }
})

Différences avec Vue 2 : beforeDestroy devient onBeforeUnmount, destroyed devient onUnmounted – une sémantique plus claire.

Recommandations pratiques

1. Bonnes pratiques avec Composition API

• Utiliser onMounted pour accéder au DOM ou appeler des API
• Nettoyre les écouteurs globaux (ex: window.resize) dans onUnmounted
• Éviter de modifier les données réactives dans updated pour prévenir les boucles infinies

2. Comparaison avec React Hooks | Vue 3 | React | |---|---| | Hooks de cycle de vie explicites | Remlpacement par useEffect | | Suivi automatique des dépendances | Dépendances à déclarer manuellement |
3. Support TypeScript

import type { OnMounted } from 'vue'

const customHook: OnMounted = (callback) => {
  // Implémentation personnalisée
}

Flux d'exécution visuel

Création instance → setup() → beforeMount → Rendu DOM → mounted  
                    ↓  
Mise à jour données → beforeUpdate → Re-rendu → updated  
                    ↓  
Démontage composant → beforeUnmount → Suppression DOM → unmounted 

Pour des scénarios spécifiques comme les différences dans le SSR, précisez vos besoins.