この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:T
更新日時:2019-07-20 08:43:57

タイトル: ライフサイクルフック(created / mounted / updated / destroyedの使い方)
SEOタイトル: 【Vue.js】ライフサイクルフック(created / mounted / updated / destroyedの使い方)

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

ライフサイクルフックを行うことで、任意のタイミングで処理を実行することが出来ます。

それぞれ処理のタイミングが異なるので下記の一覧で確認してください。

 

実装例

var app = new Vue({
  el: '#app',
  created: function() {
    console.log("created");
  },
})

 

一覧

beforeCreate データの監視とイベント/ウォッチャのセットアップより前の、インスタンスが初期化されるときに同期的に呼ばれます。
 
created インスタンスが作成された後に同期的に呼ばれます。この段階では、インスタンスは、データ監視、算出プロパティ、メソッド、watch/event コールバックらのオプションのセットアップ処理が完了したことを意味します。しかしながら、マウンティングの段階は未開始で、$el プロパティはまだ利用できません。
beforeMount

インスタンスのマウンティングが開始される直前に呼ばれます。
mounted

新たに作成される vm.$el によって置き換えられる el に対して、インスタンスがマウントされたちょうど後に呼ばれます。ルートインスタンスがドキュメントの中の要素にマウントされる場合、vm.$el も mounted が呼び出されるときにドキュメントの中に入ります。

mounted は 全ての子コンポーネントもマウントされていることを保証しないことに注意してください。ビュー全体がレンダリングされるまで待つ場合は、 mounted の代わりに vm.$nextTick を使うことができます。
beforeUpdate データが変更されるとき、DOM が適用される前に呼ばれます。これは、更新前に既存の DOM にアクセスするのに適しています。
updated

データが変更後、仮想 DOM が再描画そしてパッチを適用によって呼ばれます。

このフックが呼び出されるとき、コンポーネントの DOM は更新した状態になり、このフックで DOM に依存する操作を行うことができます。しかしがながら、ほとんどの場合、無限更新ループに陥る可能性があるため、このフックでは状態を変更するのを回避すべきです。

updated は 全ての子コンポーネントも再レンダリングされていることを保証しないことに注意してください。ビュー全体が再レンダリングされるまで待つ場合は、 updated の代わりに vm.$nextTick を使うことができます。
beforeDestroy Vue インスタンスが破棄される直前に呼ばれます。この段階ではインスタンスはまだ完全に機能しています。
destroyed Vue インスタンスが破棄された後に呼ばれます。このフックが呼ばれるとき、Vue インスタンスの全てのディレクティブはバウンドしておらず、全てのイベントリスナは削除されており、そして全ての子の Vue インスタンスは破棄されています。
errorCaptured 任意の子孫コンポーネントからエラーが捕捉されるときに呼び出されます。フックは、エラー、エラーをトリガするコンポーネントインスタンス、そしてどこでエラーが捕捉されたかの文字列情報、これら 3 つの引数を受け取ります。フックはエラーがさらにもっと伝播するのを防ぐために、false を返すことができます。