# ライフサイクルフック

このページは、すでに Composition API の基本リアクティブの基礎 を読んでいることを前提としています。 Composition API を初めて使用する場合は、最初にそちらをお読みください。

Vue Mastery でライフサイクルフックに関する無料ビデオを視聴する

ライフサイクルフックの前に "on" をつけることで、コンポーネントのライフサイクルフックにアクセスすることができます。

setup() 内で、ライフサイクルフックを呼び出す方法は、次の表の通りです:

オプション 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

TIP

setupbeforeCreatecreated のライフサイクルで実行されるため、これらのフックを明示的に定義する必要はありません。言い換えれば、これらのフック内のコードは、 setup 内に直接書くべきです。

これらの関数は、コンポーネントからフックが呼び出された時に実行されるコールバックを、受け入れます:

// MyBook.vue

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}
1
2
3
4
5
6
7
8
9
10