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

Question

Vue.js la documentation décrit l' created et mounted événements comme suit:

created

Appelée de manière synchrone après la création de cette instance. À ce stade, l'instance a fini de traiter les options qui signifie les éléments suivants ont été mis en place: les données d'observation, les propriétés calculées, méthodes, à regarder les rappels d'événement. Cependant, la phase de montage n'a pas été commencé, et le $el propriété ne sera pas encore disponible.

mounted

Appelé après que l'instance a juste été monté où el est remplacé par la machine virtuelle nouvellement créée.$el. Si la racine de l'instance est monté sur un en élément de document, vm.$el sera également du document lors de la montée est appelé.

Ce crochet n'est pas appelée lors de rendu côté serveur.

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

1. Est-il un cas où l' created serait utilisé sur mounted?
2. Que puis-je utiliser l' created événement, dans la vie réelle (real-code) situation?

Answer 1

created() : depuis le traitement des options est fini, vous avez accès à réactif data propriétés et de les modifier si vous le souhaitez. À ce stade, DOM n'a pas été monté ou ajouté encore. De sorte que vous ne peut pas faire de manipulation du DOM ici

mounted(): appelé d'après le DOM a été monté ou rendus. Ici vous avez accès aux éléments du DOM et DOM la manipulation peut être effectuée par exemple obtenir le innerHTML:

console.log(element.innerHTML)

Donc à vos questions:

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

Créé est généralement utilisé pour l'extraction de données à partir d'API principale et la valeur des propriétés de données comme wostex commenté . Mais en SSR mounted() crochet n'est pas présent vous avez besoin pour effectuer des tâches telles que l'extraction de données dans créé crochet seulement

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

Pour récupérer les données requises pour être rendu(comme JSON) de l'API externe et en l'assignant à une réactifs de propriétés de données

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