Ответ
В Vue есть несколько хуков событий (lifecycle hooks), которые позволяют выполнять код на разных этапах жизненного цикла компонента. Основные хуки:
- beforeCreate – вызывается до инициализации данных и событий.
- created – вызывается после инициализации данных, но до монтирования DOM.
- beforeMount – вызывается перед началом монтирования компонента в DOM.
- mounted – вызывается после монтирования компонента в DOM.
- beforeUpdate – вызывается перед обновлением DOM из-за изменений данных.
- updated – вызывается после обновления DOM.
- beforeUnmount (в Vue 2 – beforeDestroy) – вызывается перед удалением компонента.
- unmounted (в Vue 2 – destroyed) – вызывается после удаления компонента.
Пример:
export default {
created() {
console.log('Компонент создан, но DOM ещё не сгенерирован');
},
mounted() {
console.log('Компонент вмонтирован в DOM');
}
}Ответ 18+ 🔞
Слушай, а вот эти ваши Vue-хуки, жизненные циклы... Это ж, блядь, как история про Герасима и Муму, только для кода! Прям поэма, ёпта.
Представь, твой компонент — это такой вот Герасим, здоровый мужик, но немой. Только он не «Му-му» говорит, а проходит этапы, блядь.
Вот он только родился, в рот меня чих-пых! beforeCreate — это когда он ещё даже не понял, кто он и зачем. Данных нет, событий нет — полный ноль, пустота. Как Герасим до барыни.
Потом — created! Вот тут он уже осознал себя. Данные инициализировал, хуй с горы, методы завёл. Уже личность! Но в DOM-е его ещё нет. Он как бы в подсознании проекта живёт, в этой самой «конторе под лестницей».
Дальше начинается цирк. beforeMount — он уже приготовился, собрался с силами, подошёл к тому месту в разметке, куда его воткнут. Напряжение, блядь, волнение ебать!
И БАМ! mounted! Всё, приехали. Его уже в DOM впихнули, как кирпич в стену. Он теперь часть страницы, может тыкаться в реальные элементы, хуярить запросы на сервер. Главное — успеть впердолить всё нужное именно здесь, пока не началась война с ререндерами.
А война-то как раз и начинается! Данные поменялись. beforeUpdate — это как Герасим услышал, что барыня хочет Муму утопить. DOM ещё старый, но в данных уже пиздец. Состояние — «подозрение ебать чувствую».
Потом Vue хитро всё пересчитает и — updated! DOM обновился. Муму как бы уже в мешке, но ещё не в озере. Тут можно похакать с обновлёнными элементами, но осторожно, а то зациклишься — и пидары налетели, бесконечный цикл ререндеров.
И вот финал, трагедия, блядь. Компонент решили убрать. beforeUnmount (или beforeDestroy в старье) — последний шанс. Последние слова, убрать таймеры, отписаться от событий. «Прощай, Муму...»
И наконец — unmounted (destroyed). Всё. Компонента нет. Он уплыл на дно. Память, надеюсь, почистили. Осталась только пустота и консоль-логи, как немые крики «Му-му...» в ночи.
Вот так вот, на хуй. А в коде это выглядит проще, чем рассказывать:
export default {
created() {
console.log('Компонент создан, но DOM ещё не сгенерирован. Как Герасим до Муму.');
},
mounted() {
console.log('Компонент вмонтирован в DOM. Всё, приехали, можно работать.');
}
}Главное — не быть, как тот максималист Герасим, и не мочить всё подряд в created. Каждому хуку — своё дело, блядь. И тогда жить будет проще.