Фото від Vincent van Zalinge на Unsplash
Попередні вимоги
- Переконайтеся, що у вас встановлено Node.js версії 18.3+.
- Вам потрібно створити додаток на Vue, дотримуючись цього посібника.
Вступ
Кожен компонент Vue має свій власний життєвий цикл. Від етапу створення до етапу знищення є різні хуки життєвого циклу, які можна використовувати для різних сценаріїв.
1. onBeforeMount
onBeforeMount(() => {
console.log('Компонент ось-ось буде змонтовано')
})
Цей хук викликається безпосередньо перед тим, як компонент буде змонтовано в DOM. Це остання можливість виконати підготовчі дії перед рендерингом компонента.
2. onMounted
onMounted(() => {
console.log('Компонент змонтовано')
})
Цей хук викликається після того, як компонент був змонтований в DOM. Це хороше місце для виконання операцій, які вимагають наявності компонента в DOM, наприклад, доступу до елементів DOM або виконання мережевих запитів.
3. onBeforeUpdate
onBeforeUpdate(() => {
console.log('Компонент ось-ось оновиться')
})
Цей хук викликається, коли змінюється реактивний стан, безпосередньо перед тим, як DOM буде оновлено і перерендовано. Його можна використовувати для виконання операцій перед оновленням.
4. onUpdated
onUpdated(() => {
console.log('Компонент оновлено')
})
Цей хук викликається після того, як DOM компонента був оновлений. Його можна використовувати для виконання операцій після того, як оновлення відбулося.
5. onBeforeUnmount
onBeforeUnmount(() => {
console.log('Компонент ось-ось буде демонтажовано')
})
Цей хук викликається безпосередньо перед демонтажем компонента. Це хороше місце для виконання очищення, наприклад, для видалення прослуховувачів подій (Event Listeners) або зупинки таймерів.
6. onUnmounted
onUnmounted(() => {
console.log('Компонент демонтажовано')
})
Цей хук викликається після того, як компонент був демонтажовано. Його можна використовувати для виконання остаточних операцій очищення.
7. onErrorCaptured
onErrorCaptured((err, instance, info) => {
console.error('Помилка зловлена:', err, info)
return false // запобігає подальшому поширенню помилки
})
Цей хук викликається, коли помилка від дочірнього компонента була зловлена. Його можна використовувати для обробки помилок і запобігання їх поширенню.
Готово
Найбільш часто використовувані хуки життєвого циклу — це onMounted і onUnmounted. Інші хуки використовуються залежно від дій, які ви хочете виконати в певні моменти життєвого циклу компонента.
Попередній: Обчислені властивості
Наступний: Посилання на шаблон
Перекладено з: Component Lifecycle