Vue.jsのライフサイクルフックを学ぶ

7月からVue.jsを扱うプロジェクトに入ったのでVue.jsをおさらいしています。今回はライフサイクルフックについて学んでいきます。参考は公式ドキュメントです。

jp.vuejs.org

ライフサイクルフックとは

インスタンスの状態が変化したタイミングで自動的に呼ばれる関数です。ライフサイクルフックを理解することはVue.jsで効果的な開発をすることにとって、とても重要です。

beforeCreate

Vueインスタンスが作られる前、インスタンスが初期化されるときに呼ばれる。インスタンスプロパティなんかにアクセスすることができないのであんまり使うことはない。あるとしたらVueインスタンスを作る前に、Vue外部と連携を取る必要がある時かな。経験はないです。

created

インスタンスが作られた後に呼ばれます。このタイミングでdata、computed、methodsなどが利用可能になります。dataやcomputedにアクセスできるので、使い所はありそうですね。

beforeMount

Vueインスタンスが作成された後、DOMが初めて構築される直前に呼ばれます。DOMが構築される「前」なのであまり使い所はないですね。

mounted

DOMが構築されたタイミングで呼ばれます。HTMLとして描画されているわけではないこと、子コンポーネントのDOMも構築されていることが保証されるわけでない点に注意が必要です。

beforeUpdate

dataオプションで保持している値が変更され、DOMが更新される前に呼ばれます。更新される前のDOMにアクセスしたいときに有効です。

updated

dataオプションで保持している値が変更され、DOMが更新された後に呼ばれます。update内でDOMの更新を行うと無限ループに陥ってしまうので注意が必要です。また、子コンポーネントが更新されていることは保証されません。呼ばれる回数も多いことから描画コストもかかる上に、ロジックが複雑になりやすいのでできるだけ使うのを避けた方がいいフックです。

activated

コンポーネントが活性化するときに呼ばれます。このフックはタグを使用している時のみ呼ばれます。

deactivated

コンポーネントが非活性化するときに呼ばれます。このフックはタグを使用している時のみ呼ばれます。

beforeDestroy

destroy()メソッドを呼んだ時など、Vueインスタンスが破棄される直前に呼ばれます。このフック内では、Vueの各オプションはまだ機能しているため、インスタンス内の情報を利用したい場合に有効になるフックです。

destroyed

Vueインスタンスが破棄された後に呼ばれます。このフックが呼ばれるとき、既にVueの各オプションは機能していないので、Vueインスタンスが持っていた情報にはアクセスできないため使い所は少ないフックです。

errorCaputured

子コンポーネントからエラーが捕捉されたときに呼ばれます。このフックは返り値としてbooleanが定義されています。falseを返すことで親コンポーネントへのエラーの伝播を止めることができます。

まとめ

さらっとVueもライフサイクルフックを全て紹介してみました。activated、deactivatedなんてフックがあるのは知らなかったし、destroyedなんて使うことあんのかな〜って改めて思いました。使うのはほとんどcreated、mountedあたりなんじゃないでしょうか？ひとまず、頭の片隅ででも覚えておけば、開発中に何かあったときにドキュメントを見返して使ってみることができると思うので、是非覚えてみてください。