2019.03.24目次vue.jsのライフサイクルライフサイクルの全体図Vue.jsのbeforeCreatedとはVue.jsのcreatedとはVue.jsのbeforeMountとはVue.jsのmoutedとはVue.jsのbeforeUpdateとはVue.jsのupdatedとはVue.jsのbeforeDestroyVue.jsのdestoryvue.jsのライフサイクル公式サイトにvue.jsのライフサイクルのフローチャートが掲載されているのでこれを整理しつつ、解説していこうと思います。公式サイトにライフサイクルのフローチャートが記載されていますので引用しておきます。Frameworkjp.vuejs.orgではこの図を上から追って解説していきます。Vue()のインスタンスを生成する命令を出した後、イベントとライフサイクルを初期化した後に呼ばれるライフサイクルフックです。Vueインスタンスは生成されていません。その証拠にconsole.logをつかってthis.$elを表示してみてください。未定義値(undefined)になるはずです。この時点でdataオブジェクトにアクセスすることはできません。Vue.jsのcreatedとはインジェクションとリアクタビリティが初期化された後、呼ばれるライフサイクルフックです。このライフサイクルフックが呼ばれた時点で、Vueインスタンスが既に生成されています。dataオブジェクトを使うことが可能です。this.プロパティ名でdataオブジェクトに定義したプロパティにアクセスすることができます。computed(算出プロパティ)にもアクセスすることができます。次のプログラムをみてください。出力"KATBLO""KATBLO""hogeComputedが呼ばれました""katublo"dataプロパティとcomputedにアクセスすることはできていますが、dataプロパティへの書き込みが失敗しています。この点に関して、なぜそうなるのかを現状説明できないので、わかり次第更新したいと思います。(CodePenで動かしたからかも)またインターンでメンターの先輩にここでサーバーサイドから値を取得する、APIの呼び出しなどの処理を書くのが良いとのアドバイスを頂きました。Vue.jsのbeforeMountとはVueインスタンスがマウントされる前に呼ばれるライフサイクルフックです。Vueインスタンスをマウントする前ですのでthis.$elでアクセスすることはできません。"created"}});</script></body></html>Vue.jsのmoutedとはVueインスタンスがマウントされた後に呼ばれるライフサイクルフックです。当然ながらVueインスタンスが$elにマウントされているので、アクセスすることができます。Vue.jsのbeforeUpdateとはデータの更新があった際に呼ばれるライフサイクルフックです。データの更新というのはコンポーネントのdataプロパティの値が変わったりした時などのことを指しています。このライフサイクルフックでは名前の通り、更新後のdataプロパティの値を参照することができます。3000);}});</script></body></html>上のプログラムですと、3秒おきにdataプロパティのcounterが更新されるので、このライフサイクルフックも3秒おきに呼び出されます。その時参照しているcounterは更新後の値になっています。Vue.jsのupdatedとはデータの更新があり、再度レンダリングされた後に呼び出されるライフサイクルフックです。Vue.jsのbeforeDestroyvm.$destroy()などによってインスタンスが削除される直前にライフサイクルフックです。ページ遷移をする時に、そのページのインスタンスは破棄されるのでこのライフサイクルフックが呼ばれます。storeの内容をリセットしたりする処理を挟んだりすることが多いです。Vue.jsのdestoryこちらもvm.$destroy()が呼ばれることによってVueインスタンスが削除された後に呼ばれるライフサイクルフックです。番外:その他おすすめの記事エンジニアがもっと楽しく仕事できるようにスキルアップの方法や役立つ情報を発信しています。興味がある方はご覧になってください。読者の皆様にとって損になるようなことはないと思います。使ってない方は是非使ってみてください!おすすめアイテム1自分はオフィス次の2点の座布団と背もたれクッションを利用してます。姿勢が安定し、お尻への負担が激減します。オフィスにいるのに自宅で作業しているような感覚になるので気に入ってます。介護用クッションおすすめアイテム2ブックスタンドみなさん使ってますか?PCを打ちながら参考書見る時に手で抑える必要がなくなるので非常に便利です。別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方、エンジニアのスキルに不安があるかたに是非読んで欲しい技術本をまとめました。そのなかで例を1つあげるならば「リーダブルコード」などが挙げられます。優秀なエンジニアの先輩でこの本を読んでいない方はほぼいないと思います。エンジニアのスキルを上げるために、ある程度読むべき本というものが決まっているのできちんと読んで勉強しましょう。時短アイテム!日々の生活の質を上げる日常生活における無駄を省く表品をまとめました。1日無駄な作業時間が10分発生するとしたら1年間で3600時間もその無駄な作業に時間を費やすことになります。このような魔の作業を消し去ってくれる商品をまとめました。全て自分が使ってお勧めできる商品のみ紹介してます。日常の無駄な作業を効率化する商品まとめ気軽にお声かけくださいこのような形でほぼ毎日、情報発信を行ってます。技術的な部分で誤っている点などもあるかもしれません。その様な部分を発見した方はTwitterのDMなどで知らせていただければ凄い嬉しいです。自身自身のエンジニアのネットワークを広げたいと思ってます。日頃六本木や渋谷にいることが多いですので気軽にお誘いください。今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございました。フォーム入力バインディング(v-model)は双方向バインディングを実現するために使用するディレクティブです。vue-test-utilsと呼ばれるテストフレームワークを使用します。consoleに出力されたエラーは以下の2つ。vue開発で役立つコマンドが用意されていたり、開発の一部をGUIで行うことを可能とする開発ツールです。芝浦工業大学に合格し、法政大学を選んだ理由。芝浦工業大学に合格し、法政大学を選んだ理由。初心者が買うべきの技術本まとめ生活の無駄な作業を削除するアイテムまとめ理系の学生・社会人の登録必須マッチングアプリタイトルとURLをコピーしました。