Differenza tra gli eventi creati e montati in Vue.js

Documentazione Vue.js descrive la createde mountedgli eventi nel modo seguente:

created

Chiamato in modo sincrono dopo la creazione dell'istanza. In questa fase, l'istanza ha terminato l'elaborazione delle opzioni, il che significa che sono stati impostati i seguenti: osservazione dei dati, proprietà calcolate, metodi, callback di eventi / watch. Tuttavia, la fase di montaggio non è stata avviata e la proprietà $ el non sarà ancora disponibile.

mounted

Chiamato dopo che l'istanza è stata appena montata dove el viene sostituito dal nuovo vm. $ El. Se l'istanza di root è montata su un elemento nel documento, vm. $ El sarà anche nel documento quando viene chiamato mount.

Questo hook non viene chiamato durante il rendering sul lato server.

Capisco la teoria, ma ho 2 domande sulla pratica:

1. Esiste un caso in cui createdverrebbe utilizzato mounted?
2. Per cosa posso usare l' createdevento, nella situazione di vita reale (codice reale)?

created() : poiché l'elaborazione delle opzioni è terminata hai accesso a reattivo data proprietà e modificale se lo desideri. In questa fase il DOM non è stato ancora montato o aggiunto. Quindi non puoi fare nessuna manipolazione DOM qui

mounted(): chiamato dopo che il DOM è stato montato o reso. Qui hai accesso agli elementi DOM e la manipolazione DOM può essere eseguita ad esempio ottenere il innerHTML:

console.log(element.innerHTML)

Quindi le tue domande:

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

Creato viene generalmente utilizzato per recuperare i dati dall'API back-end e impostarli sulle proprietà dei dati. Ma in mounted()hook SSR non è presente è necessario eseguire attività come il recupero dei dati solo nel hook creato

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

Per recuperare tutti i dati richiesti iniziali da rendere (come JSON) dall'API esterna e assegnarli a tutte le proprietà dei dati reattivi

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