プレミアム会員限定動画

Vue3 の Composition API における、ライフサイクル（Lifecycle）メソッドについて

動画内で説明していた、Vue3 の公式ドキュメントはこちら
https://ja.vuejs.org/api/composition-api-lifecycle.html

Vue.js（ビュージェイエス）を基礎から学びたい方はこちら
https://factory-programming-mv.com/playlistDetails/PLv7E5OqNAIPz7gvvX8JCf74MiFQZufIn7/


Vue3は、前バージョンのVue2とは異なる新しいAPI、Composition APIを導入しています。この中には、コンポーネントの特定のタイミングで実行される「ライフサイクルフック」というコールバック関数が存在します。

1. ライフサイクルフックとは？
ライフサイクルフックは、Vue.jsでコンポーネントの特定のタイミングで動作する関数を指します。例えば、コンポーネントが画面上に表示（マウント）された直後や、データが更新される前などのタイミングで特定の処理を実行したいときに利用します。

2. 主なライフサイクルフック：
onBeforeMount：コンポーネントがマウントされる前のタイミングで実行。
onMounted：コンポーネントがマウントされた後のタイミングで実行。このタイミングではHTML要素にアクセス可能。
onBeforeUpdate：コンポーネントが更新される前に実行。
onUpdated：コンポーネントが更新された後に実行。
Composition APIには、以前の「Options API」と呼ばれる書き方とは異なる形式が導入されており、特定のライフサイクルフック（beforeCreateやcreated）が存在しない点も特徴です。しかし、これらのタイミングはsetupメソッドの中で実行されるため、Composition APIでの表現としては不要となっています。

3. 例としての動作：
サンプルでは、ボタンをクリックすると数字がカウントアップされるシンプルなアプリケーションが示されています。ボタンをクリックするたびに、onBeforeUpdateとonUpdatedが呼び出されることが説明されています。

初心者の方向けに、Vue3やComposition APIにおけるライフサイクルを理解することは、効率的なアプリケーションの開発に役立ちます。特にコンポーネントの動作や更新のタイミングを把握することで、より柔軟なアプリケーションの実装が可能となります。