【Vue.js】ライフサイクルフック(created / mounted / updated / destroyedの使い方) - IT技術総合Wiki

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例：親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例：親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

テンプレートを更新

テンプレート

ライフサイクルフック(created / mounted / updated / destroyedの使い方)

◀ 8. 【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 を返すことができます。