Что такое хуки жизненного цикла во Vue

Question

Что такое хуки жизненного цикла во Vue

Тип вопроса: Vue Вероятность: 10% Категория: Frontend Разработчик

Ответ

Хуки жизненного цикла в Vue — это специальные функции, которые вызываются на разных этапах существования компонента. Они позволяют выполнять код в определённые моменты, например, при создании, обновлении или удалении компонента.

Основные хуки:

beforeCreate — до инициализации данных и событий
created — после инициализации данных, но до монтирования DOM
beforeMount — перед рендерингом шаблона
mounted — после первого рендера (DOM доступен)
beforeUpdate — при изменении данных, но до обновления DOM
updated — после обновления DOM
beforeUnmount — перед удалением компонента
unmounted — после удаления компонента

Пример:

export default {
  mounted() {
    console.log('Компонент отрендерен');
    this.fetchData(); // Вызов метода после монтирования
  },
  methods: {
    fetchData() { /* ... */ }
  }
}

Хуки помогают управлять побочными эффектами, подписками и очисткой ресурсов.

Ответ 18+ 🔞

А, слушай, ну это ж классика, блядь! Vue-то, сука, как живой организм — рождается, мучается, обновляется и, в конце концов, накрывается медным тазом. И на каждом этапе, понимаешь, можно влезть со своим уставом, подсунуть свой код, как хитрая жопа.

Вот смотри, есть у нас эти... как их... хуки жизненного цикла, ёпта. Специальные такие функции-засады. Компонент идёт себе по жизни, а они — хвать его за рукав в определённый момент! «Стоять! Не двигаться! Сейчас тут мой код выполнится, блядь!»

Основные-то вот эти бандиты:

beforeCreate — это когда компонент ещё даже в проекте, данных нет, событий нет, нихуя нет. Чистый лист, блядь. Но ты уже можешь что-то своё подсунуть, паразит.
created — а вот тут уже данные инициализировались! Ура! Но в DOM-е его ещё нет, он как призрак, блядь. Уже можно с данными работать, а вот пощупать элементы на странице — хуй с горы.
beforeMount — вот-вот, прям щас шаблон в DOM впендюрят. Последний вздох перед выходом в свет.
mounted — ВСЁ, ПИЗДЕЦ! Компонент в DOM! Можно трясти элементами, можно хуярить запросы на сервер — полная власть, блядь! Самый любимый хук у всех распиздяев.
beforeUpdate — данные внутри поменялись, а DOM ещё старый, лицемерный уёбок. Можно что-то проверить перед тем, как всё перерисуется.
updated — а вот и перерисовалось! DOM обновился. Осторожно тут, а то зациклишься, если начнёшь в этом хуке данные менять — получишь вечный двигатель, ебать мои старые костыли.
beforeUnmount — компоненту пришла путёвка на тот свет. Ещё жив, но уже пахнет нафталином. Самое время отписаться от всякой хуйни, таймеры поубивать, а то память потечёт.
unmounted — короче, его уже нет. Пизда компоненту. Можно разве что по нему поплакать, но уже бесполезно.

Ну и пример, чтобы не быть пиздаболом:

export default {
  mounted() {
    console.log('Компонент отрендерен, ёпта!');
    this.fetchData(); // А вот теперь можно и данные подтянуть, когда DOM готов
  },
  methods: {
    fetchData() { /* ... */ }
  }
}

Вот эти все хуки, они как раз для того, чтобы управлять всей этой подводной хуйней: подписками на события, запросами, уборкой за собой. Чтобы не как свинья в хлеву, насарал и свалил, а культурно, блядь. Удалился компонент — и ни одного утекающего таймера после себя не оставил. Красота!