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

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

created

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

mounted

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

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

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

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

Ответ 1

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

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

console.log(element.innerHTML)

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

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

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

What can я 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;
    });
}

Ответ 2

Добавление этого, потому что я НАСТОЯТЕЛЬНО наткнулся на него - ответ OP по-прежнему верен.

У меня не было доступа к моим миксинам в mounted, но он хорошо работал в created