IT技術総合Wiki

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

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

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

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

mounted は 全ての子コンポーネントもマウントされていることを保証しないことに注意してください。ビュー全体がレンダリングされるまで待つ場合は、 mounted の代わりに vm.$nextTick を使うことができます。

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

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

updated は 全ての子コンポーネントも再レンダリングされていることを保証しないことに注意してください。ビュー全体が再レンダリングされるまで待つ場合は、 updated の代わりに vm.$nextTick を使うことができます。