ライフサイクルフックの使いわけがよく分からない

Question

質問内容

Vue.jsでライフサイクルフックなるものを勉強したときに、
どのサイトをみても、createdはDOMが作成される前に呼び出される…mountedはDOMが作成されるときに呼び出される…のように、どこで呼び出されるかの記述があるだけで、具体的にどういう状況で使えばいいのかが分かりませんでした。

こういう場面でこれを使うとよい、この場面ではこれを使うと問題が生じるなどの使い分けなどをご存知の方がいらっしゃいましたら、ご教示いただけると幸いです。
（GitHubにあるこのコードが参考になる！とかでも良いです。非常にありがたいです。。）

Answer 1

下記記事が非常に参考になるかと。
（使用例もわかりやすい）

Vueのライフサイクルを完全に理解した - Qiita

基本的な考え方としては、
各コールバックのタイミングで、必要な情報が入り次第、処理を挟みたいって時に使うものだと思います。
ライフサイクルの理解と使用は、フレームワーク使用の上での、初級から中級への第一歩となりますので、
よくよく勉強した上で、使っていかれるといいかと思います。

beforeCreate

インスタンスが生成される前に実行されます。
（インスタンスを生成することを、ほとんどの場合、初期化、という）
ようは、Vueが、これからいろいろ処理始めますよーって時に実行されるものです。
この時点では、ほとんど変数の処理などがされていない状態なので、
できることは少ないでしょう。
ただし、一番先に実行されるので、Ajaxなどの非同期処理を先に走らせておくと、
処理時間の節約になると思われます。

created

Vueインスタンスが生成完了した時に呼ばれます。
Vueの変数などが一通り用意された状態なので、様々な処理が可能になった段階です。
まだ、HTML要素の生成は完了していないので、
HTMLにマウントさせる変数の用意や、変更処理を行うのに適したコールバックだと思われます。

beforeMount

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

ようは、これからHTML要素に変数の反映などを行なっていきますよーという段階で呼ばれるということです。
マウントさせる変数の最終調整や、createdでの非同期処理が完了したかどうかの確認も行いやすいと思います。

mounted

HTMLへのマウントが完了した段階でよばれます。
ようは、マウントさせたい変数などが、HTMLに反映された段階で呼ばれるコールバックです。
（この後レンダリングが順次行われる）
なので、変数が反映された後に、改めて処理を行いたいという時に、有用なコールバックでしょう。

beforeUpdate

データの更新があった時に、rerenderされる前に実行されます。

更新前の既存のDOMに対してアクセスすることができます。

DOMにアクセス可能なので、DOMの状態によっては、やっぱ処理を変えたい、などの判別が可能になるかと。

updated

データの更新があった時に、rerenderされた後に実行されます

このフックでは、状態変化を行うような処理は推奨されていません。
なぜならばそれが原因で無限ループに入ってしまう可能性があるからです。

とある通りです。
変数の変更がある度に実行されるので、
何かと便利ではあるのですが、そこでさらに変数の変更を行なってしまうと、無限ループになるよ、という、
少し注意が必要なコールバックのようですね。
例えば、createdの段階で、重い非同期処理をかけており、
その処理が終わり、変数の変更がかかった時も呼ばれるので、
そこで、改めて、マウント変数に値を反映させる、などの使い方が想定されます。
ただし、上記にある通り、無限ループになる可能性があるので、
変数の変更をさらにする場合は特に、変数の値によって、処理をさせない、など工夫が必要かと。

あと何個かあるようですが、常時使いそうなものをまとめてみました。
参考になれば幸いです。

Comments

[Suumon]

この記事は少し前に読んだ気がします。

こちらを見れば、どこで呼び出されるのかは理解できるのですが、
じゃあ、実際にどのような機能を実装するときに使うのか…
までは分からなかったんですよね。

んー、これで理解できる方が大勢いらっしゃるということは、
私自身、フロントエンドでどのような機能を実装するかとか言語以前に分かってないことがあるってことなんでしょうね…。

[miyabi_pudding]

なるほど。
そういう時は、質問する際、参考にした記事を質問本文に記載しとくといいですよ。
そうすれば、どのように調べたか、理解レベルがどれくらいか、ということが把握できるので、回答を得られやすくなります。

後ほど、各コールバックが、どういった状況に使うと有効か、書き出してみます。

ですが、最終的には、自分で使ってみていろいろやってみないことには、わからないとは思います。

[Suumon]

> そういう時は、質問する際、参考にした記事を質問本文に記載しとくといいですよ。

全く仰る通りです。説明を端折りすぎました…、反省です。

> ですが、最終的には、自分で使ってみていろいろやってみないことには、わからないとは思います。

んー、何かいい感じの書籍で体系的に学ぶのがいいですかね。
[Vue.js入門 基礎から実践アプリケーション開発まで](https://www.amazon.co.jp/dp/4297100916?tag=maftracking247988-22&linkCode=ure&creative=6339)らへん読んで勉強しなおそうかと思います。

[miyabi_pudding]

その本にライフサイクルについて載ってたかな・・・。
まず、書店でサラっと立ち読みしてみたほうがいいかもですね。

[Suumon]

> その本にライフサイクルについて載ってたかな・・・。

ぱっとみなかったですね。。
でも面白そうなので買いました。

あと、詳しい回答ありがとうございます！
今後の勉強の参考にさせていただきます！

[miyabi_pudding]

実は私も、以前その本を購入したことがありまして、
確か載ってなかったような気がしましたが、案の定でしたか。
ですが、かなり有用な本だと思いますよ。
それを読んで、Vue.jsの技術を高めていかれることを祈っております。
頑張ってください。