Vue オブジェクトが出来上がって終わるまでにいくつかの過程があって、 その各過程に置いて処理をフックできるようになっている。

コンストラクタにライフサイクルのイベント名で関数を登録すればそれでそのタイミングでキックされる

new Vue({
    created: function(){
        // 処理
    }
});

ライフサイクルの一番最初のイベント。 出来ただけなのでほぼ何も出来ないのであまり用がない。

データの準備が完了したという段階。データバインディングはまだされていない。 ここでデータを更新するロジックの初期化や仕込みを行ったりする。

テンプレートのコンパイルが終わって、画面上の DOM をマウントする直前。

直前ではあるが、画面上のすり替える前の DOM はこのタイミングで $el 内に保持されている。

マウントされて画面上の DOM が Vueオブジェクトの管理下に入り、 画面描画が終わったタイミング。

テンプレートが指定されているならそれが Vue的なコンパイルを経て、el で指定した DOM とすり替わっている この時点で $el はテンプレートのモノに入れ替わっている

データに変化があってバインドされている要素を更新する直前

データに変化があってバインドされている要素を更新した直後

$destroy メソッドが呼ばれてオブジェクト破棄処理が走る直前

created と対のイベントで、create で仕込んだモノをここで解除したりする。 ここで外部との関係を断ち切らないとオブジェクトを破棄しても対象がガベージコレクタの対象にならないので、問題を引き起こす可能性がある。

オブジェクト破棄処理が全部終わって、本当にオブジェクトが破棄される直前