ブログ一覧に戻る

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

JavaScriptNuxt

みなさんこんにちは!
イザナギです!

ミドルウェアを使うと、特定のページやいくつかのページのグループがレンダリングされる前に実行されるカスタム関数を定義することができます。 https://ja.nuxtjs.org/guide/routing/#%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2
コンポーネントのデータをセットする前に非同期の処理を行える https://ja.nuxtjs.org/api/

Axiosなどで非同期処理を行うときに使用するらしいです。
非同期処理で得たデータをそのまま、データとして返します。
さらに、asyncDataでreturnしたデータをテンプレートに書く際には「this.」をつける必要がありません!

fetch

こちらもasyncDataと同じく、非同期通信などで使われるらしいです。
しかし、asyncDataとの違いはstoreに格納するために使用されています。

render

ここで、コンポーネントがレンダリングされるらしいです。
renderの中には「beforeCreate」「created」のメソッドがあります。
これらはVueのライフサイクルメソッドですね!

beforeCreate

インスタンス生成前に実行されます。
ですので、data()のデータは参照できないらしいです。

created

インスタンス生成後に実行されます。
data()のデータは参照を参照できますが、Elementプロパティは呼ばれていないらしい。

まとめ

今回はNuxtのライフサイクルメソッドについてまとめて見ました。
それでは、今回はここで筆を置かせていただきます!
最後まで記事をご覧いただきありがとうございました!

関連記事

この記事に関連するおすすめです。