概要
Nuxt.jsのライフサイクルフックについて
自分の中で曖昧な部分が多々ありましたのでアウトプットしたいと思います。
ライフサイクルフックとは
一言で言うとWEBページを表示する手順のこと。
全部で10個のフックが存在し、各フックで行われることが異なる。
WEBページが表示される手順
1. serverMiddleware
__サーバーのみで実行されるフック__であり、__サーバー固有の処理__を記載したりする。
APIサーバーをserverMiddlewareを使って作成することもできる。
処理を書いたファイルをnuxt.config.jsのserverMiddlewareに登録するだけで使用できる。
2. nuxtServerInit
severMiddlewareと同様に__サーバーのみで実行されるフック__で
__クライアント側に処理を渡す前にサーバー側で行う処理__を記載する。
サーバーからクライアント側へ初期値を渡す処理や、クッキーの取得処理などを記載できる。
3. RouteMiddleware
__サーバーとクライアントの両方で実行されるフック__で
サーバーでは１回、クライアント側ではページ遷移のたびに呼び出される。
__ルーティング処理__などを記載する。
たとえば、認証していないユーザーはログインページにリダイレクトされるなど。
middlewareディレクトリ内にファイルを作成し、nuxt.config.jsのmiddlewareに登録することで
処理を反映できる。
4. Validate
サーバーでSSR時に１回、クライアント側でページ遷移のたびに呼び出されるフック。
各コンポーネントで__バリデーション処理__を設定できる。
コンポーネント内のでvalidateメソッドを定義することで使用できる。
5. asyncData
サーバーでSSR時に１回、クライアント側でページが読み込まれるたびに呼び出される。
__APIからデータを取得し、ローカルデータに格納するような処理__を行う。
コンポーネント内でasyncDataメソッドを定義して使用する。
6. beforeCreate
__Vueインスタンスが初期化されるときに呼び出される__フック。
注意点としてインスタンスは初期化されるが、thisを使ったようなデータにはアクセスできない。
7. created
Vueインスタンスが初期化され、データも初期化されたときに呼び出される。
ここで、beforeCreateでは使用できなかった、thisを使用したデータへのアクセスが可能になる。
なお、created以降からthisを使用してローカルのデータにアクセスできるようになる。
8. fetch
サーバー側でSSR時に１回、クライアント側でページ遷移ごと呼び出される。
__APIからデータを取得する処理__などを記載する。
備考： fetchとasyncDataの違い
| asyncData | fetch |
|---|---|
| thisは使用できない | thisを使用できる |
| pagesディレクトリ配下のファイルでのみ使用可 | すべてのコンポーネントファイルで使用可 |
9. beforeMount
__Vueインスタンスが実際のDOMにマウントされる前にクライアントでのみ呼び出される__フック。
ちなみに__マウント__とは、既存のDOMをVueインスタンスが生成するDOMで置き換えること。
10. mounted
__VueインスタンスがDOMにマウントされた後にクライアントで呼び出される__フック。
__DOMを操作する処理__を記載する。
DOMが生成された後なので、classやidを取得することができる。
参考文献
Nuxt.js公式ドキュメント
Vue.js公式ドキュメント
Nuxt.jsのライフサイクルフックを丁寧に解説してみた。