Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

chan_kaku
January 19, 2019

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

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

chan_kaku

January 19, 2019
Tweet

More Decks by chan_kaku

Other Decks in Programming

Transcript

  1. ライフサイクルを
    完全に理解する
    2018/1/19 Vue.js/Nuxt.js meetup #2
    chan_kakuz

    View Slide

  2. 自己紹介
    フリュー株式会社
    サーバーサイドエンジニア
    Vueとの出会いは入社してから
    ライブ、フェス、ベース、
    技術的なところの勉強、お酒、最近はクラフトビール
    仕事
    趣味
    Twitter @chan_kakuz
    v-kansai 運営

    View Slide

  3. この話は#1で話そうとした話

    View Slide

  4. 今回話すこと

    View Slide

  5. 話すこと
    Vueのライフサイクルについて
    - そもそもライフサイクルとは
    - 各ライフサイクルフックの紹介

    View Slide

  6. 今回話さないこと

    View Slide

  7. 話さないこと
    Vueの基本的な記法等々、、、、

    View Slide

  8. Vueのライフサイクルとは?

    View Slide

  9. 引用:https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム

    View Slide

  10. これ

    View Slide

  11. とはいえ雑すぎるのでちゃんと説明

    View Slide

  12. ライフサイクル
    インスタンスが生成されてから削除されるまでの流れ
    Vueではこの流れの中でいくつかのタイミングで
    フックと呼ばれる関数を実行することができる

    View Slide

  13. 順をおって説明

    View Slide

  14. インスタンス作成時

    View Slide

  15. ここ

    View Slide

  16. beforeCreate
    これはインスタンスの生成前に実行できます
    このタイミングでは、インスタンスは初期化前ですので、
    dataは呼ばれていません

    View Slide

  17. beforeCreate

    View Slide

  18. created
    これはインスタンスが作成された後で実行されます
    個人的にはcreatedは一番使っている印象です!!
    ※注意として、elementプロパティはまだここでは呼ばれて
    いません

    View Slide

  19. created

    View Slide

  20. マウント時

    View Slide

  21. ここ

    View Slide

  22. beforeMount
    インスタンスが作成された後、
    elementへのマウントされる前で実行されます

    View Slide

  23. mounted
    elementへのマウントがされた後に実行されます
    mountedは、elementへのマウントが行われた後処理されます。
    したがって、elでelementを指定している場合、createdではタイミングとして早い
    と言うことになります。
    子コンポーネントを全て再描画することを保証はしていないので、
    $nextTickを使うことを推奨されています

    View Slide

  24. データ更新時

    View Slide

  25. ここ

    View Slide

  26. beforeUpdate
    データの更新があった時に、rerenderされる前に実行され
    ます。
    更新前の既存のDOMに対してアクセスすることができま
    す。

    View Slide

  27. updated
    データの更新があった時に、rerenderされた後に実行されます
    このフックでは、状態変化を行うような処理は推奨されていません。
    それが原因で無限ループに入ってしまう可能性がある。
    updatedもmountedも子コンポーネントを全て再描画することを保証はしていな
    いので、
    mounted同様$nextTickを使うことを推奨されています。

    View Slide

  28. beforeUpdate,
    updated

    View Slide

  29. インスタンスの削除時

    View Slide

  30. ここ

    View Slide

  31. beforeDestroy
    $destroy()が呼ばれた後、インスタンスが削除される前に実
    行されます

    View Slide

  32. destroyed
    $destroy()が呼ばれた後、インスタンスが削除された後に実
    行されます

    View Slide

  33. エラー時

    View Slide

  34. errorCaptured
    このフックは、任意の子孫コンポーネントからのエラーが捕捉された時に、呼び
    出されます。
    フックは、エラー、エラーをトリガーするコンポーネントのインスタンス、エラーが
    捕捉されたかどうかのメッセージを受け取ることができます。
    また、エラー伝播を防ぐ為に、falseにすることで任意の箇所以降に広まらない
    ようにすることも可能です
    ※このフックはversion2.5.0以降で使用することができます

    View Slide

  35. これで完全理解ですね

    View Slide

  36. 素敵なVueライフを!

    View Slide

  37. 最後に宣伝

    View Slide

  38. View Slide

  39. fin

    View Slide