Vueのライフサイクルを理解する [Vue.js v2.x]

今回はVueインスタンスのライフサイクルについて理解していこうと思います。

インスタンスのライフサイクル

Vueのインスタンスは、インスタンスを生成する時やDOM要素へのマウントする時、データを更新する時、インスタンスを破棄する時など、特定の段階でユーザーがコードを追記して処理を行えるようにいくつかの「ライフサイクルフック」と呼ばれる関数を実行します。

ライフサイクルフック

次にあげるものがVueで利用できるライフサイクルフックになります。

インスタンスの作成時

インスタンスの作成時には以下の2つのフックが呼ばれます。

beforeCreate

created

DOMへのマウント時

DOMへのマウント時には以下の2つのフックが呼ばれます。

beforeMount

mounted

データの変更・画面の更新時

データの変更・画面の更新時には以下の2つのフックが呼ばれます。

beforeUpdate

updated

コンポーネントの活性化時

コンポーネントの活性化時には以下のフックが呼ばれます。

activated

コンポーネントの非活性化時

コンポーネントの非活性化時には以下のフックが呼ばれます。

deactivated

インスタンスの破棄時

インスタンスの破棄時には以下の2つのフックが呼ばれます。

beforeDestroy

destoryed

エラー捕捉時

エラー捕捉時には以下のフックが呼ばれます。

errorCaptured

ライフサイクルフックは、Vueインスタンス作成されて破棄されるまでの間に、いくつかのタイミングで呼び出されます。ライフサイクルフックは、イベントのような感覚で利用できます。

beforeCreate

beforeCreateフックはVueインスタンスの生成時（生成前）に実行されます。
beforeCreateフックの実行時点では、リアクティブデータが初期化される前なので、dataオブジェクト等を参照してもデータを取得することはできません。

<script>
new Vue({
  data() {
    return {
      styles: {
        width: '100vw',
        height: '100vh'
      }
    }
  },
  beforeCreate () {
    // 作成前の処理
    console.log('Width: ${this.styles.width} Height: ${this.styles.height}');
    // Error
  }
})
</script>

new Vue({

data() {

return {

styles: {

width: '100vw',

height: '100vh'

}

beforeCreate () {

// 作成前の処理

console.log('Width: ${this.styles.width} Height: ${this.styles.height}');

// Error

}

})

</script>

created

createdフックはVueのインスタンスが生成され、データが初期化された後に実行されます。
createdフックの実行時点では、DOMが生成されていないので、DOMの操作を行うことはできません。element(this.$el)にアクセスすることもできません。リアクティブデータやメソッド等を参照することはできます。

<script>
new Vue({
  el: 'app',
  data() {
    return {
      styles: {
        width: '100vw',
        height: '100vh'
      }
    }
  },
  created () {
    // 作成後の処理
    console.log(`Width: ${this.styles.width} Height: ${this.styles.height}`);
    // Width: 100vw Height: 100vh
  }
});
</script>

new Vue({

el: 'app',

data() {

return {

styles: {

width: '100vw',

height: '100vh'

}

created () {

// 作成後の処理

console.log(`Width: ${this.styles.width} Height: ${this.styles.height}`);

// Width: 100vw Height: 100vh

}

});

</script>

beforeMount

beforeMountフックはVueのインスタンスがDOMにマウントされる前に実行されます。
beforeMountフックの実行時点では、createdフックと同様に、DOMが生成されていないので、DOMの操作を行うことはできません。

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'Value'
    }
  },
  beforeMount() {
    // マウント前の処理
  }
});
</script>

new Vue({

el: 'app',

data() {

return {

value: 'Value'

}

beforeMount() {

// マウント前の処理

}

});

</script>

mounted

mountedフックはVueインスタンスがDOMにマウントされた後に実行されます。
mountedフックの実行時点でようやくDOMの操作（アクセス）を行うことができます。

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'Value'
    }
  },
  mounted() {
    // マウント後の処理
  }
});
</script>

new Vue({

el: 'app',

data() {

return {

value: 'Value'

}

mounted() {

// マウント後の処理

}

});

</script>

mountedフックの実行時点では、全ての子コンポーネントもマウントされていることが保証されないことに注意しなければなりません。全ての子コンポーネントがレンダリングされるまで待つ場合は、$nextTickを使用します。

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'Value'
    }
  },
  mounted() {
    this.$nextTick(() => {
      // レンダリング後の処理
    });
  }
});
</script>

new Vue({

el: 'app',

data() {

return {

value: 'Value'

}

mounted() {

this.$nextTick(() => {

// レンダリング後の処理

});

}

});

</script>

beforeUpdate

beforeUpdateフックはデータが変更され、DOMに反映される前に実行されます。

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'Value'
    }
  },
  beforeUpdate() {
    // 変更前の処理
  }
});
</script>

new Vue({

el: 'app',

data() {

return {

value: 'Value'

}

beforeUpdate() {

// 変更前の処理

}

});

</script>

updated

beforeUpdateフックはデータが変更され、DOMに反映された後に実行されます。

<script>
new Vue({
  el: 'app',
  data() {
    return {
      value: 'Value'
    }
  },
  updated() {
    // 変更後の処理
  }
});
</script>

new Vue({

el: 'app',

data() {

return {

value: 'Value'

}

updated() {

// 変更後の処理

}

});

</script>

activated

activatedフックはコンポーネントが活性化する時に実行されます。

組み込みコンポーネント – keep-alive
動的コンポーネント – keep-alive

deactivated

deactivatedフックはコンポーネントが非活性化される時に実行されます。

組み込みコンポーネント – keep-alive
動的コンポーネント – keep-alive

beforeDestroy

beforeDestroyフックはVueインスタンスが破棄される直前に実行されます。
beforeDestroyフックの実行時点では、Vueインスタンスはまだ完全に機能しています。

destoryed

destoryedフックはVueインスタンスが破棄された後に実行されます。
Vueインスタンスのすべてのディレクティブ、すべてのイベントリスナ、すべての子のVueインスタンスは破棄されています。

errorCaptured

errorCapturedフックは、任意の子孫コンポーネントからエラーが捕捉される時に実行されます。

errorCapturedの型

(err: Error, vm: Component, info: string) => ?boolean

1	(err: Error, vm: Component, info: string) => ?boolean

errorCapturedフックは、「err: Error（エラー）」「vm: Component（エラーをトリガするコンポーネントインスタンス）」[info: string（エラーの捕捉情報）」の3つの引数を受け取ります。
エラーが伝播するのを防ぐためにはfalseを返します。

errorCapturedフックはVersion 2.5.0で追加されました。

まとめ

今回はVueのライフサイクルについて見てきました。
ライフサイクルフックの実行されるタイミングとオブジェクトの状態を知ることで、ライフサイクルごとの処理を正しく記述することができるようになります。
また、期待した通りに動作しないということもなくなると思います。

補足

上記のライフサイクルフックの実行のタイミングは、同期処理でのものが前提になっています。async await などを利用した非同期処理をライフサイクルフック内で行っている場合は、各フックに記述した処理が意図したとおりに動作しないことがあるので注意が必要です。

Vue.js 入門 Tips 一覧

参考URL

Vue インスタンスライフサイクルフック
 オプション/ライフサイクルフック

リンク