Explication détaillée de la fonction app.onUnmount() de Vue3

Vue3 全局 APIAPI globale de Vue3

app.onUnmount()est une API utilisée pour ajouter une fonction de rappel qui est exécutée lorsqu'un composant est démonté.

app.onUnmount()est une API très utile dans Vue 3. Elle aide les développeurs à effectuer les opérations de nettoyage nécessaires lorsqu'un composant est démonté, évitant les fuites de mémoire et le gaspillage de ressources. En l'utilisant correctement,app.onUnmount()peut améliorer la stabilité et les performances d'une application.

1. Qu’est-ce qu’uneapp.onUnmount()？

app.onUnmount()est une API globale fournie par Vue 3. Elle permet aux développeurs d'ajouter une fonction de rappel à l'instance d'application, et cette fonction de rappel est automatiquement exécutée lorsque le composant est démonté. Cette fonctionnalité est particulièrement adaptée au nettoyage des ressources, à l'annulation des écouteurs d'événements ou à d'autres opérations qui doivent être traitées lorsque le composant est démonté.

2. Syntaxe de base

Exemple

app.onUnmount(() => {
  // Écrivez ici le code qui doit être exécuté lorsque le composant est démonté
});

app.onUnmount()accepte une fonction de rappel en paramètre, et cette fonction est automatiquement appelée lorsque le composant est démonté.

3. Cas d'utilisation

3.1 Nettoyer les ressources

Dans un composant, nous pouvons créer certaines ressources qui doivent être nettoyées lorsque le composant est démonté, telles que des minuteurs, des connexions WebSocket ou des instances de bibliothèques tierces. L'utilisation deapp.onUnmount()garantit que ces ressources sont correctement nettoyées lorsque le composant est démonté.

Exemple

app.onUnmount(() => {
  clearInterval(timerID); // Effacer le minuteur
  webSocket.close(); // Fermer la connexion WebSocket
});

3.2 Annuler les écouteurs d'événements

Si des écouteurs d'événements globaux sont enregistrés dans un composant, ils doivent être supprimés lorsque le composant est démonté afin d'éviter des fuites de mémoire.

Exemple

app.onUnmount(() => {
  window.removeEventListener('resize', handleResize); // Supprimer l'écouteur d'événement de redimensionnement de la fenêtre
});

3.3 Annuler les abonnements

Dans un composant, nous pouvons nous abonner à certaines sources de données ou flux d'événements, tels que les Observables RxJS. Lorsque le composant est démonté, ces abonnements doivent être annulés afin d'éviter une consommation inutile de ressources.

Exemple

app.onUnmount(() => {
  subscription.unsubscribe(); // Annuler l'abonnement
});

4. Exemple de code

Voici un exemple de code complet montrant comment utiliser laapp.onUnmount()fonction dans Vue 3.

Exemple

import { createApp } from 'vue';

const app = createApp({
  setup() {
    const timerID = setInterval(() => {
      console.log('Le minuteur est en cours d'exécution...');
    }, 1000);

    app.onUnmount(() => {
      clearInterval(timerID); // Effacer le minuteur lorsque le composant est démonté
      console.log('Le minuteur a été effacé.');
    });

    return {};
  }
});

app.mount('#app');

Dans cet exemple, nous avons créé un minuteur qui affiche "Timer is running..." chaque seconde. Lorsque le composant est démonté, le minuteur est effacé et "Timer has been cleared." est affiché.

5. Remarques

  • app.onUnmount()est global, ce qui signifie qu'il se déclenche lorsque n'importe quel composant est démonté. Si plusieurs composants nécessitent une logique de démontage différente, vous devrez peut-être utiliser leonUnmountedhook à la place.
  • Assurez-vous d'effectuer uniquement les opérations de nettoyage nécessaires dans la fonction de rappel afin d'éviter une surcharge de performance supplémentaire.
Autres extensions