Explication détaillée du cycle de vie des instances Vue de la création à la destruction

Cet article vous apporte des connaissances pertinentes sur vue, qui présente principalement l'ensemble du processus du cycle de vie des instances de vue, de la création à la destruction. Le cycle de vie est que chaque instance de Vue passe par un processus lors de sa création. regardez le processus d'initialisation de la série, j'espère que cela sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, Tutoriel vue.js】

Le cycle de vie de Vue a toujours été une priorité absolue, même si seuls quelques-uns sont souvent utilisés dans le développement réel. Le cycle de vie détermine si le programme que vous écrivez est bon, et cet aspect a toujours été un point de test important pour la partie Vue de l'entretien.

Première introduction au nouveau Vue

À propos du nouveau Vue Tout le monde devrait savoir que le mot-clé new instancie un objet en js. Alors, qu'a fait le nouveau Vue ?

En fait, new Vue crée une instance Vue. L'instance Vue est une classe New Vue exécute en fait le constructeur de la classe Vue :

let vm = new Vue({
   el: "#app",
   data: {
       name: 'beiyu'
   },
}

Donc à propos de cette instance, de son initialisation à sa destruction. , ce qui s'est passé? Jetons un coup d'œil ci-dessous :

Instance Vue de la création à la destruction

Le processus d'instance de la création à la destruction est appelé cycle de vie

Le concept de base du cycle de vie :

Quand chaque instance Vue est créée Tous doivent passer par une série de processus d’initialisation.

Par exemple : vous devez configurer la surveillance des données, compiler des modèles, monter des instances sur DOM et mettre à jour le DOM lorsque les données changent, etc. Dans le même temps, certaines fonctions appelées hooks de cycle de vie seront également exécutées au cours de ce processus, ce qui donnera aux utilisateurs la possibilité d'ajouter leur propre code à différentes étapes.

1. Avant la création—beforeCreate()

Avant la création de l'objet d'instance Vue

l'attribut el et l'attribut data sont tous deux vides, souvent utilisés pour initialiser des variables non réactives

beforeCreate() {
    console.group("---创建前beforeCreate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:' + this.$data)
},

2. )

Une fois l'objet instance Vue créé, l'attribut data existe, l'attribut el est vide et le contenu de l'attribut ref est un tableau vide. Il est souvent utilisé pour les requêtes axios, l'initialisation de page, etc. Mais ne faites pas trop de requêtes ici, sinon un long écran blanc apparaîtra.

created() {
    console.group("---创建之后created---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

3. Avant que l'objet d'instance et le document ne soient montés—beforeMount()

Avant que l'objet d'instance et le document Vue ne soient montés, le modèle correspondant sera trouvé

beforeMount() {
    // 这个时候$el属性是绑定之前的值
    console.group("---挂载之前beforeMount---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

4. —mounted ()

Une fois l'objet d'instance Vue et le nœud de document montés, l'attribut el existe et l'attribut ref est accessible

mounted() {
    console.group("---挂载之后mounted---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
    console.log('%c%s', 'color: red', 'data:' + this.$data, this.$data.name)
},

5 Avant la mise à jour de la vue—beforeUpdate()

Vue avant la vue. view is update Appelé lorsque les données réactives sont mises à jour

beforeUpdate() {
    console.group("---更新之前beforeUpdate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},

6 Une fois la vue mise à jour—updated()

Une fois la vue mise à jour Le DOM est mis à jour ici, il peut tomber dans. une boucle infinie

updated() {
    console.group("---更新之后updated---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)
},

7. Avant que l'instance ne soit détruite—beforeDestroy()

Avant que l'objet d'instance Vue ne soit détruit | À ce stade, el et les données sont toujours là. les événements globaux et la destruction des objets du plug-in sont effectués à cette étape.

beforeDestroy() {
    console.group("---销毁之前beforeDestroy---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},

8. Une fois l'instance détruite—destroyed()

Après la destruction de l'objet d'instance Vue|

destroyed() {
    console.group("---销毁之后destroyed---")
    console.log('%c%s', 'color: red', 'el:' + this.$el, this.$el.innerHTML)},

Résumé

Le cycle de vie de vue2 correspond aux 8 processus ci-dessus. les résultats ci-dessus. : 

Un total de quatre cycles de vie ont été parcourus depuis l'ouverture de la page jusqu'à sa fin. Comme il n'y a aucune autre opération sur la page, les quatre cycles de vie restants ne sont pas affichés de manière correspondante

[Connexe. recommandations :
tutoriel vidéo javascript

,

tutoriel vue.js】

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!