《初心者向け》Vue.jsのライフサイクルとは?

Vue.js

vue.jsのライフサイクル

公式サイトにvue.jsのライフサイクルのフローチャートが掲載されているのでこれを整理しつつ、解説していこうと思います。

ライフサイクルの全体図

公式サイトにライフサイクルのフローチャートが記載されていますので引用しておきます。

 

出典元:「Vue インスタンス」

Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework

ではこの図を上から追って解説していきます。

Vue.jsのbeforeCreatedとは

new Vue()のインスタンスを生成する命令を出した後、イベントとライフサイクルを初期化した後に呼ばれるライフサイクルフックです。まだVueインスタンスは生成されていません。その証拠にconsole.logをつかってthis.$elを表示してみてください。未定義値(undefined)になるはずです。この時点でdataオブジェクトにアクセスすることはできません。

Vue.jsのcreatedとは

インジェクションとリアクタビリティが初期化された後、呼ばれるライフサイクルフックです。このライフサイクルフックが呼ばれた時点で、Vueインスタンスが既に生成されています。なのでdataオブジェクトを使うことが可能です。すなわちthis.プロパティ名でdataオブジェクトに定義したプロパティにアクセスすることができます。またcomputed(算出プロパティ)にもアクセスすることができます。次のプログラムをみてください。

dataプロパティとcomputedにアクセスすることはできていますが、dataプロパティへの書き込みが失敗しています。この点に関して、なぜそうなるのかを現状説明できないので、わかり次第更新したいと思います。(CodePenで動かしたからかも)

またインターンでメンターの先輩にここでサーバーサイドから値を取得する、APIの呼び出しなどの処理を書くのが良いとのアドバイスを頂きました。

Vue.jsのbeforeMountとは

Vueインスタンスがマウントされる前に呼ばれるライフサイクルフックです。まだVueインスタンスをマウントする前ですのでthis.$elでアクセスすることはできません。

Vue.jsのmoutedとは

Vueインスタンスがマウントされた後に呼ばれるライフサイクルフックです。当然ながらVueインスタンスが$elにマウントされているので、アクセスすることができます。

Vue.jsのbeforeUpdateとは

データの更新があった際に呼ばれるライフサイクルフックです。データの更新というのはコンポーネントのdataプロパティの値が変わったりした時などのことを指しています。このライフサイクルフックでは名前の通り、更新後のdataプロパティの値を参照することができます。

上のプログラムですと、3秒おきにdataプロパティのcounterが更新されるので、このライフサイクルフックも3秒おきに呼び出されます。その時参照しているcounterは更新後の値になっています。

Vue.jsのupdatedとは

データの更新があり、再度レンダリングされた後に呼び出されるライフサイクルフックです。

Vue.jsのbeforeDestroy

vm.$destroy()などによってインスタンスが削除される直前にライフサイクルフックです。ページ遷移をする時に、そのページのインスタンスは破棄されるのでこのライフサイクルフックが呼ばれます。storeの内容をリセットしたりする処理を挟んだりすることが多いです。

Vue.jsのdestory

こちらもvm.$destroy()が呼ばれることによってVueインスタンスが削除された後に呼ばれるライフサイクルフックです。

番外:その他おすすめの記事

エンジニアがもっと楽しく仕事できるようにスキルアップの方法や役立つ情報を発信しています。興味がある方はご覧になってください。読者の皆様にとって損になるようなことはないと思います。使ってない方は是非使ってみてください!

おすすめアイテム①

自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。また疲労感もかなり減るので費用対効果が非常に高いアイテムだと思ってます!

おすすめアイテム②

ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。自分も購入した時なんでいままで使ってなかたんだろうと後悔したのでまだ持ってない方は買っておくと作業効率があがりますよ!

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方、エンジニアのスキルに不安があるかたに是非読んで欲しい技術本をまとめました。そのなかで例を1つあげるならば「リーダブルコード」などが挙げられます。優秀なエンジニアの先輩でこの本を読んでいない方はほぼいないと思います。エンジニアのスキルを上げるために、ある程度読むべき本というものが決まっているのできちんと読んで勉強しましょう。

時短アイテム!日々の生活の質を上げる

日常生活における無駄を省く表品をまとめました。1日無駄な作業時間が10分発生するとしたら1年間で3600時間もその無駄な作業に時間を費やすことになります。このような魔の作業を消し去ってくれる商品をまとめました。全て自分が使ってお勧めできる商品のみ紹介してます。

気軽にお声かけください

このような形でほぼ毎日、情報発信を行ってます。技術的な部分で誤っている点などもあるかもしれません。その様な部分を発見した方はTwitterのDMなどで知らせていただければ凄い嬉しいです。また自身自身のエンジニアのネットワークを広げたいと思ってます。日頃六本木や渋谷にいることが多いですので気軽にお誘いください。情報交換しましょう。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございました。Twitterもやってるのでフォローしてくれたら嬉しいです!

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