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

В разделе в примерах кода используется синтаксис однофайловых компонентов

Подразумевается, что уже изучили и разобрались с разделами Введение в 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('Компонент примонтирован!')
    })
  }
}