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

Vue.js документація описує createdі mountedподії наступним чином :

created

Викликається синхронно після створення екземпляра. На цьому етапі екземпляр закінчив обробляти параметри, що означає: встановлено наступне: спостереження за даними, обчислювані властивості, методи, зворотні виклики годин / подій. Однак етап монтажу ще не розпочато, і властивість $ el ще не буде доступною.

mounted

Викликається після того, як екземпляр щойно встановлений, де el замінюється новоствореним vm. $ El. Якщо екземпляр root встановлений на елементі документа, vm. $ El також буде в документі, коли виклик змонтований.

Цей гачок не викликається під час візуалізації на стороні сервера.

Я розумію теорію, але у мене є 2 питання щодо практики:

1. Чи є якийсь випадок, де createdможна було б використати mounted?
2. Для чого я можу використовувати createdподію в реальній ситуації (в реальному коді)?

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

mounted(): викликається після встановлення або надання DOM. Тут у вас є доступ до елементів DOM, і маніпуляція з DOM може бути виконана, наприклад, отримати внутрішній HTML:

console.log(element.innerHTML)

Тож ваші запитання:

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

Створений, як правило, використовується для отримання даних з 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;
    });
}