Vue.jsを開発で使い始めた人が最初の方で詰まるのがライフサイクルフックだと思います。
どのタイミングで取得したデータを表示するかといったことはライフサイクルメソッドを理解していないと上手く実装できません。
フロントエンドのライフサイクルフックは４つのタイミングを押さえておくことで使いこなせるようになります。
ここでは、ライフサイクルメソッドに登場する４つのタイミングを紹介します。
この４つのタイミングを覚えておくことでVueのインスタンスとデータの扱いがより柔軟になります。
ライフサイクルフックとは？
Vueインスタンスが作られてから消えるまでの一連のサイクルにある節目のタイミングで呼ばれる処理を事前に登録して、そのタイムングで自動に呼ばれることです。
生き物の一生と同じです。
例えばカエルが産まれる・あるタイミングになったら脱皮をする・死ぬというように生き物にはあるタイミングがあります。
ちなみにchatGPTの回答↓
’’’
Vue.jsはJavaScriptのフレームワークで、コンポーネントベースのアプリケーションを構築するために使用されます。Vueのコンポーネントには、ライフサイクルフックと呼ばれる特別なメソッドがあります。これらのメソッドは、コンポーネントのライフサイクルの中で特定のイベントが発生したときに呼び出されます。
例えば、コンポーネントが作成されるときに、beforeCreateやcreatedといったメソッドが呼び出されます。また、コンポーネントが更新されるときに、beforeUpdateやupdatedといったメソッドが呼び出されます。これらのメソッドを使用することで、コンポーネントのライフサイクルに応じて、適切なタイミングで処理を実行することができます。
’’’
ライフサイクルフックを理解するうえで知っておくべき知識
- Vue.jsのdata
- Vueインスタンス
- DOM
- DOMにマウント
(Googleにコピペして調べてみてください！)
4つのタイミング
ライフサイクルフックは流れやタイミングは暗記する必要は特になく、大まかな流れを把握して必要なときに図を参照して実装すれば十分です。
Vue.jsのライフサイクルを調べるときに"４つのタイミング"というキーワードを知っておけば早く把握できると思います。
| フックの種類 | タイミング |
|---|---|
| create | vueインスタンスが生成されて、データが初期化される前後 |
| mount | vueインスタンスがDOM要素にマウントされる前後 |
| update | データが変更されて、DOMに適用される前後 |
| destroy | vueインスタンスが破棄される前後 |
おわりに
一見難しそうなライフサイクルフックですが特定のタイミングで何か処理をしたいときに使うものだと理解したら意外と簡単な概念です！
少しでも役に立てば幸いです！！