ライフサイクルを知る意味
- ライフサイクルの中のそれぞれの責務を知ることで適切なタイミングで適切な処理を差し込むことが出来、想定外の動作や不具合を防ぐ。
Nuxt.jsのライフサイクルはVue.jsのそれとはレイヤーが違う
- 以下で登場するイメージ画像のうち1枚目がNuxt.js単体で考えたイメージで2枚目がそこにVue.jsのライフサイクルを挟み込んだもの
Nuxt.jsのライフサイクルのイメージ
- イメージはNuxt.jsビギナーズガイドより拝借。
Nuxt.js + Vue.jsのライフサイクルイメージ
- イメージはNuxt.jsのライフサイクル覚書より拝借。
1.Incoming Request(ユーザからのアクセス)
-
nuxtServeInitアクションが呼ばれる（VueストアのルートストアにnuxtServeInitが定義されている場合のみ - ここでVueストアに関する初期化処理を記述することが出来、初期化が行われる
- 必ず入れたいデータ（認証情報とか）を放り込む
2.middleware(ミドルウェア)の呼び出し
- マスタデータの取得、複雑な認証などに代表されるグローバルで単一的な機能を提供する部品を呼ぶ
3.validate
- ページコンポーネントのvalidate関数の呼び出しが行われる
- こちらはページのバリデーションであってデータのバリデーションではない
- バリデーションを通して合致しないページをエラーとして返す
- asyncDataにて代替えされることも
4.asyncData() & fetch()
- Vueコンポーネントのローカルステートに影響がない部分でのasyncData/fetchが行われる
Render以降でVue.jsのライフサイクルが挟み込まれる
※プラグインはこれより前に呼ばれる
以上！！