web-dev-qa-db-fra.com

Différence entre les événements créés et montés dans Vue.js

La documentation de Vue.js décrit les événements created et mounted comme suit:

created

Appelé de manière synchrone après la création de l'instance. A ce stade, l'instance a fini de traiter les options, ce qui signifie que les options suivantes ont été configurées: observation de données, propriétés calculées, méthodes, rappels d'observation/d'événement. Cependant, la phase de montage n'a pas encore commencé et la propriété $ el ne sera pas encore disponible.

mounted

Appelé après le montage de l'instance où el est remplacé par la nouvelle vm. $ El. Si l'instance racine est montée sur un élément in-document, la vm. $ El sera également dans le document lorsque la méthode montée sera appelée.

Ce hook n'est pas appelé lors du rendu côté serveur.

Je comprends la théorie, mais j'ai 2 questions concernant la pratique:

  1. Existe-t-il un cas où created serait utilisé sur mounted?
  2. Que puis-je utiliser l'événement created pour une situation réelle (code réel)?
javascriptvue.js
109
lesssugar

created(): le traitement des options étant terminé, vous avez accès aux propriétés réactives data et modifiez-les si vous le souhaitez. A ce stade, DOM n'a pas encore été monté ou ajouté. Donc, vous ne pouvez pas faire de manipulation du DOM ici

mounted(): appelée après le montage ou le rendu du DOM. Ici, vous avez accès aux éléments du DOM et la manipulation du DOM peut être effectuée, par exemple, obtenez le innerHTML:

console.log(element.innerHTML)

Donc vos questions:

  1. Is there any case where created would be used over mounted?

Created est généralement utilisé pour extraire des données de l'API dorsale et les définir comme propriétés de données comme wostex commenté. Mais dans le SSR mounted() le hook n’est pas présent, vous devez effectuer des tâches telles que la récupération des données dans le hook créé uniquement.

  1. What can I use the created event for, in real-life (real-code) situation?

Pour récupérer toutes les données initiales requises à restituer (telles que JSON) à partir d'une API externe et les affecter à des propriétés de données réactives

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}
169
Vamsi Krishna