Comment gérer le cycle de vie des composants dans l'API de composition Vue 3?

Dans l'API de composition de Vue 3, le crochet du cycle de vie est utilisé par la fonction ONX. La réponse est: 1. Importer sur le point, ondulé, onunmounted et l'appeler dans setup (); 2. Setup () remplace créé sans définition séparée; 3. La logique du cycle de vie peut être encapsulée dans les fonctions combinées pour la réutilisation; 4. Le crochet doit être appelé de manière synchrone et peut être enregistré plusieurs fois; 5. Les utilisations courantes incluent l'obtention de données pendant les ressources de montage et de nettoyage pendant la désinstallation, améliorant ainsi l'organisation du code et la maintenabilité.

Dans l'API de composition de Vue 3, les crochets de cycle de vie des composants sont gérés différemment de l'API Options. Au lieu de définir des méthodes de cycle de vie comme des options sur l'objet composant (comme mounted , created , etc.), vous les importez et les utilisez directement dans la fonction setup() ou une fonction de composition.

Voici comment travailler avec des crochets de cycle de vie dans l'API de composition:

Utilisez des crochets de cycle de vie avec des fonctions onX

Vue 3 fournit des fonctions spécifiques telles que onMounted , onUpdated , onUnmounted et d'autres qui correspondent aux événements de cycle de vie traditionnels. Vous les importez de vue et les appelez dans setup() .

 import {onMounted, onupdated, onunmounted} de 'Vue'

Exporter par défaut {
  installation() {
    onMounted (() => {
      console.log («composant est monté»)
      // Effectuer l'initialisation (par exemple, récupérer les données, configurer les auditeurs)
    })

    onupdated (() => {
      console.log («composant est mis à jour»)
      // réagir aux changements de données réactives
    })

    onunmounted (() => {
      console.log ('' composant n'est pas monté '))
      // Nettoyer (par exemple, supprimer les auditeurs d'événements, les heures claires)
    })

    retour {}
  }
}

Crochets de cycle de vie disponibles dans l'API de composition

Ce sont les principaux crochets de cycle de vie disponibles:

• onBeforeMount - appelé juste avant le montage du composant.
• onMounted - appelé après le montage du composant.
• onBeforeUpdate - appelé avant les mises à jour du composant en raison des modifications de données réactives.
• onUpdated - appelé une fois le composant mis à jour.
• onBeforeUnmount - appelé juste avant que le composant ne soit non monté.
• onUnmounted - appelé après que le composant n'est pas monté.
• onErrorCaptured - appelé lorsqu'une erreur se propage à partir d'un composant enfant.
• onRenderTracked & onRenderTriggered - Debug Render Mises à jour (utilisées avec le suivi reactive / ref .).

Remarque: il n'y a pas de crochet created dans l'API de composition car setup() s'exécute pendant la phase de création. Ainsi, le code qui irait dans created peut être placé directement dans setup() .

Exemple pratique: récupérer les données sur la monture

Un cas d'utilisation courant est de récupérer les données lorsque le composant monte et le nettoyage sur un mont.

 import {ref, onmounted, onunmounted} de 'vue'

Exporter par défaut {
  installation() {
    const Data = Ref (null)
    const Timer = Ref (null)

    onMounted (() => {
      // Simuler l'appel de l'API
      timer.value = setTimeout (() => {
        data.Value = 'Revended Data!'
      }, 1000)
    })

    onunmounted (() => {
      // Empêcher les fuites de mémoire
      if (timer.value) {
        ClearTimeout (Timer.Value)
      }
    })

    retour {
      données
    }
  }
}

Utilisation de crochets de cycle de vie dans des composants

L'un des grands avantages de l'API de composition est la réutilisabilité. Vous pouvez encapsuler la logique du cycle de vie dans des composants personnalisés.

 //composables/usewindowsize.js
import {ref, onmounted, onunmounted} de 'vue'

fonction d'exportation usewindowsize () {
  Const largeur = ref (0)
  const height = ref (0)

  fonction updateSize () {
    width.Value = window.innerwidth
    height.value = window.innerheight
  }

  onMounted (() => {
    updatesize ()
    window.addeventListener («redimensi», mises à jour)
  })

  onunmounted (() => {
    window.RemoveEventListener («redimensi», mises à jour)
  })

  retour {largeur, hauteur}
}

Puis utilisez-le dans n'importe quel composant:

 import {usewindowsize} depuis './composables/usewindowsize'

Exporter par défaut {
  installation() {
    const {largeur, hauteur} = usewindowSize ()
    retour {largeur, hauteur}
  }
}

Points clés pour se souvenir

• Les crochets de cycle de vie doivent être appelés de manière synchrone à l'intérieur setup() ou d'un composable - pas à l'intérieur de rappels ou de conditions asynchrones.
• Vous pouvez appeler le même crochet plusieurs fois (par exemple, plusieurs appels onMounted ), et ils seront tous exécutés.
• setup() remplace à la fois beforeCreate et created - pas besoin de les définir séparément.

Fondamentalement, l'API de composition vous offre plus de flexibilité et une meilleure organisation de code en vous permettant de regrouper la logique associée - y compris la manipulation du cycle de vie - ensemble, en particulier lors de la création de logique réutilisable avec des composants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!