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

by chan_kaku

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

今回話すこと

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

今回話さないこと

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Vueのライフサイクルとは？

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

これ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

順をおって説明

Slide 14

Slide 14 text

インスタンス作成時

Slide 15

Slide 15 text

ここ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

beforeCreate

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

created

Slide 20

Slide 20 text

マウント時

Slide 21

Slide 21 text

ここ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

データ更新時

Slide 25

Slide 25 text

ここ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

beforeUpdate, updated

Slide 29

Slide 29 text

インスタンスの削除時

Slide 30

Slide 30 text

ここ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

エラー時

Slide 34

Slide 34 text

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