new Vue, VueインスタンスHooks

new Vue()

Vue.js のインスタンス生成時のオプションは APIリファレンスに詳細 があります。

ライフサイクルフック(lifecycle hooks)

Vueはインスタンスを生成して利用します。

var vm = new Vue({
    el: '#example',
    data: {
        foo: 123,
    },
});

Vueのインスタンスには様々なフックが用意されています。それらはライフサイクルフック(lifecycle hooks) と呼ばれ、決まったタイミングで実行されます。

関数の中では、Vueインスタンスを指す this が設定されています。

created

created はインスタンスが生成された後に呼ばれます。

var vm = new Vue({
    el: '#example',
    data: {
        foo: 123,
    },
    created: function () {
        console.log(this.foo); // 123
    },
});

インスタンスが生成された後に呼ばれているので、console.log による出力は初期値の 123 となります。

beforeCreate

beforeCreate は文字通り create よりも前、インスタンスの生成よりも前です。

var vm = new Vue({
    el: '#example',
    data: {
        foo: 123,
    },
    beforeCreate: function () {
        console.log(this.foo); // undefined
    },
});

インスタンスの生成より前なので、this.foo は undefined です。

beforeMount / mounted

インスタンスが生成されたあと、Vueインスタンスの el で指定されるエレメントへのmount前後で beforeMount / mounted が呼ばれます。

var vm = new Vue({
    el: '#example',
    data: {
        foo: 123,
        bm: 1,
    },
    beforeMount: function () {
        console.log(this.foo); // 123
        console.log(this.bm); // 1
        this.bm = 2;
    },
    mounted: function () {
        console.log(this.foo); // 123
        console.log(this.bm); // 2
    },
});

上記コードのコンソールへの出力はコメントの通り、bm変数はbeforeMountで 1だったものが 2 に変更され、mounted においては 2 になっています。

created に el への処理を書いても mount されていないので効果がありませんが、mounted ならマウントされているので処理が適用されます。対して、mounted の発火時点では子コンポーネントのレンダリングが全て終わっているとは限らないので this.$nextTick にコールバックを設定してレンダリング後の実行を行います。

beforeUpdate / updated

dataが更新され、レンダリングが走る前後のフックが beforeUpdate / updated です。

beforeUpdate においては更新されようとするDOMの状態を取得することが可能です。updatedにおいては、状態変化を伴う処理を書くと無限ループを起こしかねないのでそういった処理は避けたほうが無難です。

beforeDestroy / destroyed

Vueインスタンスが削除されるときに呼ばれるフックが beforeDestroy / destroyed です。destroy時にはインスタンスにひもづく全てのwatcherやevent listenerが閉じられます。あわせて子コンポーネントも破棄されます。

errorCaptured

インスタンスの子孫でのエラーを補足するフック。Vue 2.5.0 から利用できる。

See also

• Vue ライフサイクルダイアグラム