Quelle est la différence entre monté et créé dans vue

Différence : 1. Created est appelé avant que le modèle ne soit rendu en HTML, c'est-à-dire que certaines valeurs d'attribut sont généralement initialisées puis rendues dans une vue. Mounted est appelé après le rendu du modèle en HTML, généralement après l'initialisation ; La page est terminée, puis le dom du HTML est Le nœud effectue certaines opérations requises. 2. Certaines configurations initiales du graphique ne peuvent pas être effectuées lors de la création. Vous devez attendre que le code HTML soit rendu avant de continuer ;

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

1. Qu'est-ce que le cycle de vie ?

En langage populaire, il s'agit de Une série de processus par lesquels une instance ou un composant de Vue passe de la création à la destruction. Bien que ce ne soit pas très rigoureux, c'est fondamentalement compréhensible.

Grâce à une série de pratiques, j'ai maintenant réglé tous les problèmes rencontrés, et aujourd'hui je vais enregistrer la différence entre créé et monté :

2. Quelle est la différence entre créé et monté ?

Le schéma officiel est le suivant :

Nous examinons deux nœuds du diagramme :

created : Appelé avant que le modèle ne soit rendu en HTML, c'est-à-dire il initialise généralement certaines valeurs d'attribut, puis est restitué dans une vue.

assemblé : appelé après le rendu du modèle en HTML, généralement une fois la page d'initialisation terminée, puis effectue certaines opérations requises sur le nœud DOM du HTML.

En fait, les deux sont plus faciles à comprendre. Created est généralement utilisé plus souvent, tandis que Mounted est généralement utilisé lors de l'utilisation de certains plug-ins ou composants, comme l'utilisation du plug-in chart.js : var ctx = document.getElementById (ID); Habituellement, il y a cette étape, mais si vous l'écrivez dans un composant, vous constaterez que vous ne pouvez pas effectuer une configuration initiale sur le graphique créé. rendu avant de continuer. Ensuite, monté est la seule option. Regardons un exemple (en utilisant des composants).

3. Exemple

Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"

• {{name}}
• {{age}}
• {{city}}

",         created:function(){             this.name="唐浩益"             this.age = "12"             this.city ="杭州"             var x = document.getElementById("name")//第一个命令台错误             console.log(x.innerHTML);         },         mounted:function(){             var x = document.getElementById("name")//第二个命令台输出的结果             console.log(x.innerHTML);         }     });     var vm = new Vue({         el:"#example1"     }) Vous pouvez voir le résultat comme suit :

Vous pouvez voir que tous sont rendus avec succès lorsqu'une valeur initiale est attribuée à leur création.

Mais en même temps, regardez la console comme suit :

Vous pouvez voir que le premier a signalé une erreur. La vraie raison est que l'identifiant est introuvable, et. getElementById(ID) n'a pas trouvé l'élément. Les raisons sont les suivantes :

Lors de sa création, le code HTML dans la vue n'est pas rendu, donc si vous utilisez directement le nœud dom du code HTML à ce moment-là, vous le ferez certainement. Je n'ai pas trouvé les éléments pertinents

Et en monté, à cause de cela Le html a été rendu, donc le nœud dom peut être directement utilisé, donc le résultat "Tang Haoyi" est affiché.

Ce qui précède est mon propre résumé de la différence entre monté et monté. L'écriture est relativement simple, je vais l'enregistrer pour approfondir mon impression.

【Recommandations associées : tutoriel vidéo vuejs, développement web front-end】

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!