# Хуки жизненного цикла

Подразумевается, что уже изучили и разобрались с разделами Введение в Composition API и Основы реактивности. Если нет — прочитайте их сначала.

Посмотрите бесплатное видео о том как работать с хуками жизненного цикла на Vue Mastery

Хуки жизненного цикла компонента доступны по тем же именам, но с префиксом on.

В таблице ниже указано, как нужно именовать хуки жизненного цикла внутри setup():

Options API Хук внутри setup
beforeCreate Не нужен*
created Не нужен*
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered
activated onActivated
deactivated onDeactivated

Совет

Поскольку setup запускается приблизительно как и хуки beforeCreate и created, то и не требуется их явно определять. Другими словами, любой код для этих хуков можно указать непосредственно в функции setup.

Эти функции принимают коллбэк, который будет выполнен при вызове хука компонентом:

// MyBook.vue

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Компонент примонтирован!')
    })
  }
}
1
2
3
4
5
6
7
8
9
10