Comment comprendre le cycle de vie (fonction hook) dans vue-js tutoriel-php.cn

Comment comprendre le cycle de vie (fonction hook) dans vue

清浅

Libérer： 2020-10-13 09:52:15

original

39737 Les gens l'ont consulté

Le cycle de vie de Vue (fonction hook) représente le processus de la création à la destruction de l'objet instance Vue. La fonction hook du cycle de vie de Vue est en fait l'option de l'instance Vue. Les valeurs de ces options sont toutes des fonctions, qui représentent les différentes étapes de la vie de l'instance de la naissance à la mort. il sera automatiquement déclenché.

Comment comprendre le cycle de vie (fonction hook) dans vue

[Cours recommandé : Tutoriel Vue]

Quel est le cycle de vie de Vue ?

En termes simples, le cycle de vie de Vue est qu'après l'exécution de la page Web que nous écrivons avec Vue dans le navigateur, le code que nous écrivons doit être exécuté en mémoire. Par exemple, nous écrivons tous var vm = new Vue();, qui est une instance Vue créée par new. De la création de cette instance jusqu'à la mort de l'instance lorsque nous fermons le navigateur, pendant cette période, que fait le framework Vue, que fait l'instance Vue, ce qui est fait en premier, ce qui est fait plus tard et quel est le relation entre cette série de choses ? Oui, c'est le cycle de vie de Vue.

Le cycle de vie de Vue est divisé en trois phases : la phase de création, la phase d'exécution et la phase de destruction.

Sur la photo, j'ai marqué chaque partie du cycle de vie et donné quelques explications nécessaires.

Comment comprendre le cycle de vie (fonction hook) dans vue

Explication du processus (12 étapes correspondent aux opérations dans l'image) :

1. Générez une instance Vue et exécutez l'instance. fonction hook avantCreate( ). [Avant la création de l'instance]

2. Initialisez l'instance.

3. Montez les membres de l'instance sur le modèle de vue et exécutez la fonction hook créée(). [Après la création de l'instance]

4. Déterminez s'il existe un objet el [l'objet el est utilisé pour indiquer dans quelle zone se trouve la vue que nous contrôlons].

5. S'il existe un objet el, déterminez si un modèle est utilisé.

6. Si un modèle est utilisé, suivez la méthode de compilation du modèle. Sinon, restituez la zone de vue contrôlée par el en tant que modèle. Exécutez la fonction hook avantMount(). [Avant que l'instance ne soit montée]

7. Remplacez la zone de vue el d'origine par la nouvelle zone de vue el modifiée. Exécutez la fonction hook Mounted() [une fois l'instance montée].

8. Entrez dans la phase d'exécution. La phase d'exécution consiste à effectuer certaines opérations et à exécuter la fonction hook avantUpdate(). [Avant la mise à jour des données]

9. Une fois l'opération terminée, restituez les données sur la page et exécutez la fonction hook mise à jour(). [Après la mise à jour des données]

10. Entrez dans la phase de destruction et exécutez la fonction hook beforeDestroy() [Avant la destruction de l'instance]

11. Effectuez la destruction et démontez le moniteur, le sous-composant et écouteur d'événements.

12. La destruction est terminée et la fonction hook destroy() est exécutée. [Après la destruction de l'instance]

Les fonctions Hook dans le cycle de vie sont des événements que Vue doit exécuter au cours de son cycle de vie. Ces événements sont en fait des fonctions.
Bien sûr, ces événements nous permettent, à nous, programmeurs, d'écrire du code pour effectuer les opérations que nous souhaitons lorsque le cycle de vie de Vue atteint ce point.
Les six fonctions hook en phase de création et de destruction d'une instance sont toujours exécutées une seule fois. Une fois exécuté, il ne sera plus exécuté.

Mentionné dans la figure : nous pouvons accéder aux membres de l'instance que nous avons définis uniquement après l'exécution des événements init dans le cycle de vie de Vue, et ce point est également le premier point où les membres de l'instance est accessible. Pour vérifier cela, regardons un morceau de code.

<body>
    <div id="app"></div>
    //这里的路径为本机上的vue.js路径
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el : &#39;#app&#39;,
            data : {
                msg : &#39;我是初始值&#39;
            },
            methods : {
                show : function(){
                    console.log(this.msg);
                }
            },
            beforeCreate(){
                console.log(this.msg);
            },
            created(){
                console.log(this.msg);
            }
        });
    </script>
</body>

Copier après la connexion

Le résultat est comme indiqué dans la figure :

Comment comprendre le cycle de vie (fonction hook) dans vue

Vous pouvez voir que pendant beforeCreate(), nous produisons undéfini, et après créé( ) La valeur de msg est affichée.

Cela montre que les membres de l'instance de Vue sont montés sur notre machine virtuelle uniquement après leur création, vous pouvez donc accéder aux membres de notre instance après leur création.

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!