Unterschied zwischen den erstellten und gemounteten Ereignissen in Vue.js

Die Dokumentation von Vue.j beschreibt die created und mountedEreignisse wie folgt:

created

Wird nach dem Erstellen der Instanz synchron aufgerufen. Zu diesem Zeitpunkt hat die Instanz die Verarbeitung der Optionen abgeschlossen, was bedeutet, dass Folgendes eingerichtet wurde: Datenbeobachtung, berechnete Eigenschaften, Methoden, Watch / Event-Rückrufe. Die Bereitstellungsphase wurde jedoch noch nicht gestartet, und die Eigenschaft $ el ist noch nicht verfügbar.

mounted

Wird aufgerufen, nachdem die Instanz gerade gemountet wurde, wobei el durch die neu erstellte vm. $ El ersetzt wird. Wenn die Stamminstanz in ein In-Document-Element eingebunden ist, ist vm. $ El auch beim Aufrufen in das Dokument eingebunden.

Dieser Hook wird beim serverseitigen Rendern nicht aufgerufen.

Ich verstehe die Theorie, aber ich habe zwei Fragen zur Praxis:

1. Gibt es einen Fall wo created würde mounted?
2. Wofür kann ich das createdEreignis in einer realen Situation (realer Code) verwenden?

created(): Da die Verarbeitung der Optionen abgeschlossen ist, haben Sie Zugriff auf reaktive dataEigenschaften und können diese bei Bedarf ändern. Zu diesem Zeitpunkt wurde DOM noch nicht bereitgestellt oder hinzugefügt. Sie können hier also keine DOM-Manipulation durchführen

mounted(): Wird aufgerufen, nachdem das DOM bereitgestellt oder gerendert wurde. Hier haben Sie Zugriff auf die DOM-Elemente und die DOM-Manipulation kann durchgeführt werden, um beispielsweise das innerHTML abzurufen:

console.log(element.innerHTML)

Also deine Fragen:

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

Erstellt wird im Allgemeinen zum Abrufen von Daten aus der Backend-API und zum Festlegen von Dateneigenschaften verwendet. Wenn der SSR- mounted()Hook nicht vorhanden ist, müssen Sie Aufgaben wie das Abrufen von Daten nur im erstellten Hook ausführen

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

Zum Abrufen aller anfänglich erforderlichen Daten, die gerendert werden sollen (wie JSON), von einer externen API und zum Zuweisen dieser Eigenschaften zu reaktiven Daten

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