Diferença entre os eventos criados e montados no Vue.js

A documentação do Vue.js descreve os eventos createde da mountedseguinte maneira:

created

Chamado de forma síncrona após a criação da instância. Nesse estágio, a instância concluiu o processamento das opções, o que significa que foram configuradas as seguintes: observação de dados, propriedades calculadas, métodos, retornos de chamada de observação / evento. No entanto, a fase de montagem não foi iniciada e a propriedade $ el ainda não estará disponível.

mounted

Chamado depois que a instância acaba de ser montada, onde el é substituído pelo vm. $ El recém-criado. Se a instância raiz estiver montada em um elemento no documento, vm. $ El também estará no documento quando a montagem for chamada.

Esse gancho não é chamado durante a renderização do servidor.

Entendo a teoria, mas tenho 2 perguntas sobre a prática:

1. Existe algum caso em createdque seria usado mounted?
2. Para que posso usar o createdevento, na situação da vida real (código real)?

created(): como o processamento das opções está concluído, você tem acesso às datapropriedades reativas e as altera, se desejar. Nesta fase, o DOM ainda não foi montado ou adicionado. Então você não pode fazer nenhuma manipulação DOM aqui

mounted(): chamado depois que o DOM foi montado ou renderizado. Aqui você tem acesso aos elementos DOM e a manipulação do DOM pode ser realizada, por exemplo, obtenha o innerHTML:

console.log(element.innerHTML)

Então, suas perguntas:

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

Criado é geralmente usado para buscar dados da API de back-end e configurá-los para propriedades de dados. Mas no mounted()gancho SSR não está presente, é necessário executar tarefas como buscar dados apenas no gancho criado

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

Para buscar qualquer dado necessário inicial a ser renderizado (como JSON) da API externa e atribuí-lo a quaisquer propriedades de dados reativas

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