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

Vue.js 3においてライフサイクルフックを使う方法[Vue.js]
この記事をシェアする:

この記事は Vue 3 を対象とした記事になります。
当サイトでは、Vuetify2.x や Vue 2系統の記事が多めでしたが、今後は Vue 3 系統の記事についても、少しずつ書いていく予定です。

Vue.js 3 に正式に対応する Vuetify 3 のリリースが近い事もあり、
今回から、すこしずつ Vue.js 3 関連の記事も書いていきたいと思います。

まず今回は、手短に Vue.js 3 における「ライフサイクルフック」について、書いていきます。

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

Vue.js 2 系統で制作を行なっている際、
何かと便利だった mouted や 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';

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

各ライフサイクルの実行タイミング

Vue.js公式サイトには、
各ライフサイクルの実行タイミングがわかる、図があります。
このダイアグラム図を見ると、なんとなく実行されるタイミングが分かりやすくなるかと思います。

ライフサイクルダイアグラム | Vue.js 3 ( https://v3.ja.vuejs.org/ の アプリケーションとコンポーネントのインスタンス より )

この記事のまとめ

今回は、 Vue.js 3 系統における
ライフサイクルフック」について、書いてみました。

この「ライフサイクルフック」、

「任意のタイミングで何かを実行することができる」というシンプルな概念なので
比較的とっつきやすい概念であり、
それでいて、これを覚えると結構できることの幅が広がるため、個人的には割と重要な概念の一つかなと感じています。

当サイトではこれまで、Vuetify 2.x や Vue 2 系統の記事が多めでしたが、
今後は Vue 3 系統の記事についても、少しずつ記事を増やしていく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: