Vueのライフサイクルについての説明です 対象としては、これからVueを始めようかなという方用
ライフサイクルを完全に理解する2018/1/19 Vue.js/Nuxt.js meetup #2chan_kakuz
View Slide
自己紹介フリュー株式会社サーバーサイドエンジニアVueとの出会いは入社してからライブ、フェス、ベース、技術的なところの勉強、お酒、最近はクラフトビール仕事趣味Twitter @chan_kakuzv-kansai 運営
この話は#1で話そうとした話
今回話すこと
話すことVueのライフサイクルについて- そもそもライフサイクルとは- 各ライフサイクルフックの紹介
今回話さないこと
話さないことVueの基本的な記法等々、、、、
Vueのライフサイクルとは?
引用:https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム
これ
とはいえ雑すぎるのでちゃんと説明
ライフサイクルインスタンスが生成されてから削除されるまでの流れVueではこの流れの中でいくつかのタイミングでフックと呼ばれる関数を実行することができる
順をおって説明
インスタンス作成時
ここ
beforeCreateこれはインスタンスの生成前に実行できますこのタイミングでは、インスタンスは初期化前ですので、dataは呼ばれていません
beforeCreate
createdこれはインスタンスが作成された後で実行されます個人的にはcreatedは一番使っている印象です!!※注意として、elementプロパティはまだここでは呼ばれていません
created
マウント時
beforeMountインスタンスが作成された後、elementへのマウントされる前で実行されます
mountedelementへのマウントがされた後に実行されますmountedは、elementへのマウントが行われた後処理されます。したがって、elでelementを指定している場合、createdではタイミングとして早いと言うことになります。子コンポーネントを全て再描画することを保証はしていないので、$nextTickを使うことを推奨されています
データ更新時
beforeUpdateデータの更新があった時に、rerenderされる前に実行されます。更新前の既存のDOMに対してアクセスすることができます。
updatedデータの更新があった時に、rerenderされた後に実行されますこのフックでは、状態変化を行うような処理は推奨されていません。それが原因で無限ループに入ってしまう可能性がある。updatedもmountedも子コンポーネントを全て再描画することを保証はしていないので、mounted同様$nextTickを使うことを推奨されています。
beforeUpdate,updated
インスタンスの削除時
beforeDestroy$destroy()が呼ばれた後、インスタンスが削除される前に実行されます
destroyed$destroy()が呼ばれた後、インスタンスが削除された後に実行されます
エラー時
errorCapturedこのフックは、任意の子孫コンポーネントからのエラーが捕捉された時に、呼び出されます。フックは、エラー、エラーをトリガーするコンポーネントのインスタンス、エラーが捕捉されたかどうかのメッセージを受け取ることができます。また、エラー伝播を防ぐ為に、falseにすることで任意の箇所以降に広まらないようにすることも可能です※このフックはversion2.5.0以降で使用することができます
これで完全理解ですね
素敵なVueライフを!
最後に宣伝
fin