Vue.js 3においてライフサイクルフックを使う方法[Vue.js]

Vue.js 3 におけるライフサイクルフック（Vue.js 3 で Composition API を使う場合の書き方）

Vue.js 2 系統で制作を行なっている際、
何かと便利だった mounted や created 等の、「ライフサイクルフック」。
ものすごくざっくり言うと、
「任意のタイミングで」
「何かを実行させることが可能」な、便利な概念になります。

Vue.js 3 の Composition API の記法を使う場合においても、
もちろんこの「ライフサイクルフック」の使用が可能です。

これまで
Vue.js 2 系統で使用していた「ライフサイクルフック」を
Vue.js 3 のComposition API で使用する場合の比較表は、次の通りとなります。

↑複雑な実行タイミングとなる renderTracked / renderTriggered / activated / deactivated については、現時点ではこの表に未記載です。

上記の表のように、
Vue.js 3 の公式サイトの解説によれば、

Vue.js 3 の Composition API の記法で
これまでのようにライフサイクルフックを使用したい場合、前提として
setup() の中で使用します。
↑’beforeCreate/created については、setup() の実行時に実行されるため、setup() の直下に書くことで、期待通りに動作するとのことです。

基本的には、 onMounted のように
on+(ライフサイクル名)
の形で記述することで、置き換えることが可能です。具体的には、たとえば次のように書きます。

import { onMounted, onUpdated } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('マウントされた時に実行されます')
    })
    onUpdated(() => {
      console.log('従来のupdatedと同じタイミング')
    })
    // ...(中略)...
    // ...同様の記法で、それぞれのライフサイクルフックが実行可能
  }
}