Nuxtのライフサイクルを復習し理解していこう!

JavaScript
この記事は約3分で読めます。

みなさんこんにちは!

イザナギです!

最近、家にいることが多いためパソコンばかり触ってますねwww

お外で遊びたい…

でも、しばらくは我慢ですね。

ただ家にいてもつまらないので、これを機会にNuxtのライフサイクルについて再度調べてみることにしました。

今回は「Nuxtのライフサイクル」についてまとめていきたいと思います。

Nuxtについて

今回はNuxtのライフサイクルについてまとめますので、Nuxtについては以下の公式ページを見てください。

Nuxt.js - ユニバーサル Vue.js アプリケーション
Nuxt.js はサーバーサイドレンダリングやコード分割、ホットリローディング、静的ファイル生成などを備えた Vue.js アプリケーションを構築するためのミニマルなフレームワークです!

Nuxtのライフサイクルについて

では本題です!

こちらが、公式ページから拝借したNuxtのライフサイクルのメソッドになります。

nuxtServerInit

これは、Vueのstoreを初期化などに使用することができるらしいです。

ページを離れたときに、状態を維持する時や認証データを初期に入れるときに使用するらしいです。

middleware

固有の処理を書くときに使用するっぽいです。

公式には以下の通り記述してあります。

ミドルウェアを使うと、特定のページやいくつかのページのグループがレンダリングされる前に実行されるカスタム関数を定義することができます。

https://ja.nuxtjs.org/guide/routing/#%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2

つまり、レンダリングする前の処理をかけるということですね!

また「nuxt.config.js」に全ページ共通の処理を書くことができます。

validate

これは、新しいルート(ページ)に移動するときに毎回呼ばれるメソッドらしい。

テキストや変数へのvalidateではなく、ページに関するvalidateです。

validateしてエラーが出た場合にエラーページの表示や想定外のエラーを投げることもできるみたいです。

asyncData

コンポーネントのデータをセットする前に非同期の処理を行える

https://ja.nuxtjs.org/api/

Axiosなどで非同期処理を行うときに使用するらしいです。

非同期処理で得たデータをそのまま、データとして返します。

さらに、asyncDataでreturnしたデータをテンプレートに書く際には「this.」をつける必要がありません!

fetch

こちらもasyncDataと同じく、非同期通信などで使われるらしいです。

しかし、asyncDataとの違いはstoreに格納するために使用されています。

render

ここで、コンポーネントがレンダリングされるらしいです。

renderの中には「beforeCreate」「created」のメソッドがあります。

これらはVueのライフサイクルメソッドですね!

beforeCreate

インスタンス生成前に実行されます。

ですので、data()のデータは参照できないらしいです。

created

インスタンス生成後に実行されます。

data()のデータは参照を参照できますが、Elementプロパティは呼ばれていないらしい。

まとめ

今回はNuxtのライフサイクルメソッドについてまとめて見ました。

記事に書いてみると、今まで以上に理解が深まります。

字が汚い私としては、記事にする方見やすくて見直しやすいです。www

それでは、今回はここで筆を置かせていただきます!

最後まで記事をご覧いただきありがとうございました!

コメント

タイトルとURLをコピーしました