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

Подразумевается, что вы уже изучили и разобрались с разделами Введение в 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

Совет

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

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

// MyBook.vue

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Компонент примонтирован!')
    })
  }
}