Gatilhos de Ciclo de Vida

Esta seção usa a sintaxe de componente single-file para exemplos de código

Este guia assume que você já leu a Introdução à API de Composição e Fundamentos da Reatividade. Leia elas primeiro se você for novo no assunto de API de Composição.

Assista à um vídeo grátis sobre Gatilhos de Ciclo de Vida no Vue Mastery

Você pode acessar um gatilho de ciclo de vida de um componente prefixando o gatilho com "on".

A tabela a seguir contém como os gatilhos de ciclo de vida são chamados dentro de setup():

API de Opções	Gatilho dentro de setup
beforeCreate	Não é necessário*
created	Não é necessário*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

Nota

Visto que setup é executado em torno dos gatilhos de ciclo de vida beforeCreate e created, você não precisa defini-los explicitamente. Em outras palavras, qualquer código que seria escrito dentro desses gatilhos deve ser escrito diretamente na função setup.

Essas funções aceitam um retorno de chamada que será executado quando o gatilho for chamado pelo componente:

// MyBook.vue

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Componente montado!')
    })
  }
}