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

La documentation Vue.js décrit les événements createdet mountedcomme suit:

created

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

mounted

Appelé après que l'instance vient d'être montée où el est remplacé par le vm. $ El nouvellement créé. Si l'instance racine est montée sur un élément dans le document, vm. $ El sera également dans le document lorsque monté est appelé.

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. Y a-t-il un cas où createdserait utilisé plus mounted?
2. À quoi puis-je utiliser l' createdévénement en situation réelle (code réel)?

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

mounted(): appelée après le montage ou le rendu du DOM. Ici, vous avez accès aux éléments DOM et la manipulation DOM 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 récupérer les données de l'API backend et les définir sur les propriétés des données. Mais dans le mounted()hook SSR n'est pas présent, vous devez effectuer des tâches telles que la récupération de données dans le hook créé uniquement

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

Pour récupérer toutes les données requises initiales à rendre (comme JSON) à partir d'une API externe et les affecter à toutes les 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;
    });
}