Vue.js
ライフサイクルフック

Vue 1.xのフック

• init

  インスタンスが初期化された後で、初期データの観察の前に同期的に呼び出されます。

• created

  インスタンスの作成後に同期的に呼び出されます。これは$el設定の前に行われますが、 data observationた後、 computed properties 、 watch/event callbacks 、およびmethodsが設定されました。

• beforeCompile

  Vueインスタンスのコンパイル直前。

• compiled

  コンパイルが完了した直後。すべてのdirectivesはリンクされていますが、まだ$elが利用可能になる前にあります。

• ready

  コンパイルの後に発生し、 $elが完了し、インスタンスが初めてDOMに注入されます。

• attached

  directiveによって$elがDOMに接続されるか、インスタンスが$appendTo()呼び出したときに発生します。

• detached

  $elがDOMまたはインスタンスメソッドから削除/切り離されたときに呼び出されます。

• beforeDestroy

  Vueインスタンスが破棄される直前に、まだ完全に機能しています。

• destroyed

  インスタンスが破棄された後に呼び出されます。すべてのbindingsとdirectivesはすでにバインドされておらず、子インスタンスも破棄されています。

インスタンス内での使用

内のすべてのライフサイクルフックのでVue.jsちょうどあるfunctionsは、インスタンスdeclaractionで直接それらのいずれかを配置することができます。

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

    //LIFECYCLE HOOK HANDLING
    created: function() {
        ...
    },

    ready: function() {
        ...
    }

});

共通の落とし穴： `ready（）`フックからDOMにアクセスする

ready()フックの一般的な使用例は、DOMにアクセスすることです。たとえば、Javascriptプラグインを開始したり、要素のサイズを取得したりするなどです。

問題

Vueの非同期DOM更新メカニズムにより、 ready()フックが呼び出されたときにDOMが完全に更新されたことは保証されません。これは、要素が未定義であるため、通常はエラーになります。

ソリューション

この状況では、 $nextTick()インスタンスメソッドが役に立ちます。このメソッドは、次のティック後まで、指定されたコールバック関数の実行を延期します。つまり、すべてのDOM更新が完了することが保証されているときに起動されます。

例：

module.exports {
  ready: function () {
    $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet.
    
    this.$nextTick(function() {
      $('.cool-input').initiateCoolPlugin() // this will work because it will be executed after the DOM update.
    })
  }
}