Vueのライフサイクルを完全に理解

Vueのライフサイクルについての説明です
対象としては、これからVueを始めようかなという方用

Transcript

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