Comment appliquer les méthodes et comprendre les principes du cycle de vie de Vue 3

Principe Overview

Le cycle de vie de Vue 3 (Lifecycle) fait référence à une série d'événements que les composants traversent de la création à la destruction. Certaines opérations peuvent être effectuées au cours de ces événements, telles que l'initialisation des données et. rendu des vues, chargement de données asynchrones, etc. Dans Vue 3, le cycle de vie du composant est défini via la fonction setup().

Exemple d'analyse

Le cycle de vie de Vue 3 comprend les étapes suivantes :

1 avantCréer

in It. est appelé avant la création de l'instance, c'est-à-dire avant son initialisation. À l'heure actuelle, l'instance du composant n'a pas été initialisée et les attributs tels que les données, les méthodes et les calculs ne sont pas accessibles, et certaines opérations sont effectuées avant l'initialisation de l'état du composant.

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

2.created

est appelé après la création de l'instance, c'est-à-dire après l'initialisation. À ce stade, les configurations telles que l'observation des données sont terminées, mais le DOM n'a pas encore été monté et les attributs tels que les données, les méthodes et les calculs sont accessibles. Vous pouvez utiliser la fonction hook créée pour effectuer des opérations telles que l'initialisation des données et la surveillance des événements.

import { onMounted, onUnmounted } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    onMounted(() => {
      console.log('component mounted');
    });
  },
  unmounted() {
    onUnmounted(() => {
      console.log('component unmounted');
    });
  }
}

3. beforeMount

est appelé avant le début du montage. A ce stade, les vrais nœuds DOM n'ont pas encore été rendus. Vous pouvez utiliser la fonction de hook beforeMount pour effectuer certaines opérations asynchrones avant le montage du composant, telles que le chargement d'animations.

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

4. Mounted

est appelé une fois le montage terminé. À ce stade, le composant a rendu le vrai DOM. La fonction hook montée est souvent utilisée pour initialiser les opérations DOM et remplir les données des composants après avoir interagi avec le serveur, comme l'obtention de nœuds DOM via ref et l'enregistrement d'écouteurs d'événements.

export default {
  mounted() {
    console.log('mounted');
    const button = this.$refs.myButton;
    button.addEventListener('click', () => {
      this.count++;
    });
  }
}

5. beforeUpdate

est appelé avant la mise à jour des données. À ce stade, l’ancien état des données est accessible avant la mise à jour. Vous pouvez utiliser la fonction hook beforeUpdate pour effectuer certaines opérations avant la mise à jour des données du composant, telles que la liaison dynamique de la classe et du style, etc.

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

6.mise à jour

est appelée après la mise à jour des données. À ce stade, le composant a mis à jour le DOM et peut effectuer les opérations DOM en accédant au dernier état des données. Vous pouvez utiliser la fonction hook mise à jour pour effectuer certaines opérations après la mise à jour des données du composant, telles que le déclenchement d'effets d'animation, etc.

export default {
  updated() {
    console.log('updated');
  }
}

7. beforeUnmount

est appelé avant que le composant ne soit démonté. À ce stade, l'instance du composant est toujours entièrement disponible, mais sa vue a été détruite et n'est plus mise à jour. Vous pouvez utiliser la fonction de hook beforeUnmount pour effectuer certaines opérations de nettoyage avant le démontage du composant, telles que l'annulation des écouteurs d'événements, des minuteurs et des demandes asynchrones.

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}

8. unmounted

est appelé une fois le composant démonté. À ce stade, l'instance du composant et tous ses éléments DOM associés ont été détruits, et les données et méthodes internes du composant ne sont plus accessibles. Vous pouvez utiliser la fonction hook non montée pour effectuer certaines opérations de nettoyage finales une fois le composant démonté.

export default {
  unmounted() {
    console.log('unmounted');
  }
}

Il convient de noter que certaines fonctions de cycle de vie ont été supprimées de Vue 3, telles que activées, désactivées, errorCaptured, etc., qui peuvent être implémentées via la nouvelle API de composition.

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!