Ответ
created и mounted — это хуки жизненного цикла во Vue.js.
created:
- Вызывается синхронно после создания экземпляра компонента.
- Доступны данные (
data), вычисляемые свойства (computed), методы (methods), но DOM ещё не сгенерирован (this.$el—undefined). - Подходит для инициализации данных, API-запросов.
mounted:
- Вызывается после монтирования компонента в DOM (
this.$elдоступен). - Можно работать с DOM, например, использовать
querySelectorили сторонние библиотеки, требующие DOM.
Пример:
export default {
data() {
return { message: 'Hello' }
},
created() {
console.log(this.message); // 'Hello'
console.log(this.$el); // undefined
},
mounted() {
console.log(this.$el); // <div>Hello</div>
}
}Ответ 18+ 🔞
Смотри, ну вот объясняю тебе, как эти два хука в Vue работают, а то у некоторых в голове каша, будто они оба одно и то же. Ебать, нет же!
created — это когда компонент, типа, родился, но ещё как младенец слепой. Всё внутри него уже есть: данные, методы, вычисляемые свойства — всё на месте, можно трогать. Но! Внешнего мира, то есть реального HTML-документа (DOM), он ещё нихуя не видит. this.$el в этот момент — это undefined, пустота, пиздец. Используй его, чтобы данные подтянуть с сервера или что-то посчитать, пока пользователь ждёт.
mounted — а вот это уже момент истины, ёпта! Компонент не просто родился, он уже влез в твою HTML-страницу, как родной. DOM сгенерирован, this.$el — это уже живой, настоящий HTML-элемент. Хочешь к нему прикрутить красивый график из сторонней библиотеки? Хочешь кнопку программно тыкнуть? Вперёд, только здесь! Потому что раньше этого элемента просто не существовало, понимаешь?
Вот, смотри на код, тут всё ясно:
export default {
data() {
return { message: 'Привет, ёпта' }
},
created() {
console.log(this.message); // Выведет 'Привет, ёпта'
console.log(this.$el); // А вот это выведет undefined, потому что DOMа ещё нет, в рот меня чих-пых!
},
mounted() {
console.log(this.$el); // А тут уже будет реальный <div>Привет, ёпта</div>, с ним можно работать.
}
}Короче, запомни: created — для логики, mounted — для действий с готовой страницей. И не путай, а то потом будешь искать баг, почему твоя библиотека для графиков не работает, а она потому что в created её инициализировал, где DOMа ещё нет! Сам от себя охуеешь.