【Vue】ライフサイクルについてまとめてみる

どうも。みずかず(@mizukazu_1)です。

Vueにはライフサイクルというものがあります。

処理が実行されるタイミングを制御するものなのですが、あんまりガッツリ調べたことが無かったので
今回調べてみました。

正直、普段よく使うcreatedとmountedくらいしかあまり理解していない気がします、、、

Vueには8つのライフサイクルがある

どうやらVueには8つのライフサイクルがあるようです。
思ってたよりも多いですが順を追って見ていきます。

インスタンスは生成される。データが初期化される前。

インスタンスが生成され、データの初期化後。

インスタンスがDOMにマウントされる前。

インスタンスがDOMにマウントされた後。

データが更新されたがDOMに適用される前。

データが更新されDOMに適用された後。

インスタンスが破壊される前

インスタンスが破壊された後

Qiitaのこちらの記事を参考にしています。
https://qiita.com/ksh-fthr/items/2a9f173c706ef6939f93

一通り書いてみましたが、いつも使うcreatedとmounted以外の使い道が今のところ思い浮かばないですね。
追記があり次第こちらの記事に書いていきます。

とりあえずはcreatedとmountedの2つを覚えておけば大丈夫だと思います。

注意点としてはDOMの操作が必要な時にcreatedに処理を書いてしまうとDOＭへのマウントがされていないので操作が出来ません。
なのでDOM操作を行う場合にはmountedの中に処理を書くという事を忘れずに。

Vueの公式にあるライフサイクルダイアグラムを貼っておきます。
※申し出があった場合には速やかに画像は削除いたします。

Vueのインスタンスが作成されて、初期化が走りどのタイミングでライフサイクルがフックされているかが良く分かりますね。

これを完全に理解するというのは難しいですが少しずつ覚えていこうと思います。

今回は8つのライフサイクルについて書いてきましたが、正直内容が少し薄い気がしています。
というのも僕自身がこの内の2つのライフサイクルしか使ったことが無いので他の6つについてが何とも言えないんですよね、、、

やっぱりこういうのは自分で手を動かした方が理解が深まるので今度他の6つのライフサイクルについても使用してみます。

その時にはこちらの記事に追記する形で書き加えていくのできっとどんどん内容の厚い記事になっていくはず、、、！

みずかず

今後の展開に乞うご期待！