Hooks de Ciclo de Vida

Esta sección utiliza componentes de un solo archivo para ejemplos de códigos

Esta página asume que usted ya ha leído Introducción de la API de Composición y Fundamentos de la Reactividad. Léalos primero si usted es nuevo con la API de Composición.

Vea un video gratis sobre hooks de ciclo de vida en Vue Mastery

Usted puede acceder a los hooks de ciclo de vida de un componente agregando el prefijo "on" al hook.

La siguiente tabla contiene como los hooks de ciclo de vida son invocados dentro de setup():

API de Opciones	Hook dentro de setup
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

TIP

Como setup es ejecutado alrededor de los hooks de ciclo de vida beforeCreate y created, usted no necesita definirlos explícitamente. En otras palabras, cualquier código que podría ser escrito dentro de estos deberían ser escrito directamente en la función setup.

Estas funciones aceptan un callback que será ejecutado cuando el hook sea invocado por el componente:

// MyBook.vue

export default {
  setup() {
    // montado
    onMounted(() => {
      console.log('¡El componente está montado!')
    })
  }
}