Разница между созданными и смонтированными событиями в Vue.js

Vue.js документация описывает createdи mountedсобытия следующим образом :

created

Вызывается синхронно после создания экземпляра. На этом этапе экземпляр завершил обработку параметров, что означает следующее: наблюдение данных, вычисленные свойства, методы, обратные вызовы наблюдения / события. Однако этап монтирования еще не начался, и свойство $ el пока не будет доступно.

mounted

Вызывается после монтирования экземпляра, в котором el заменяется вновь созданным vm. $ El. Если корневой экземпляр смонтирован в элементе документа, vm. $ El также будет в документе при вызове смонтированного.

Этот хук не вызывается во время рендеринга на стороне сервера.

Я понимаю теорию, но у меня есть 2 вопроса относительно практики:

1. Есть ли какой-нибудь случай, где createdбудет использоваться более mounted?
2. Для чего я могу использовать createdсобытие в реальной (реальной) ситуации?

created(): так как обработка опций закончена, у вас есть доступ к реактивным dataсвойствам и, если хотите, измените их. На данном этапе DOM еще не был установлен или добавлен. Таким образом, вы не можете делать какие-либо манипуляции DOM здесь

mounted(): вызывается после монтирования или отображения DOM. Здесь у вас есть доступ к элементам DOM, и можно выполнить манипулирование DOM, например, получить innerHTML:

console.log(element.innerHTML)

Итак, ваши вопросы:

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

Created обычно используется для извлечения данных из внутреннего API и установки его в свойствах данных. Но в SSR mounted()ловушка отсутствует, вам нужно выполнять такие задачи, как выборка данных только в созданной ловушке

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

Для извлечения любых исходных необходимых данных, которые должны быть отображены (например, JSON) из внешнего API, и назначения их для любых свойств реактивных данных

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