Vue Componentのライフサイクルフック(created, mounted, updated, destroyed など )一覧・まとめ

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Vue Componentのライフサイクルフック(created, mounted, updated, destroyed)などについて、まとめて解説していきます。

1 Vue Componentのライフサイクルフックまとめ・一覧
- 1.1 ライフサイクルフックの SampleCodeまとめ
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

Vue Componentのライフサイクルフックまとめ・一覧

Vue.jsのコンポーネントは、いくつかのライフサイクルフック（lifecycle hooks）を持っています。

これらのフックは、コンポーネントの作成、更新、破棄などの Componentの状態によって、特定のコードを実行するために使用されます。

Vue.js 2系のライフサイクルフックをまとめると次のとおりです。

beforeCreate: コンポーネントが初期化され、データの監視やイベントの設定などの前に実行されます。
created: コンポーネントが初期化され、依存関係の解決、データの監視、イベントの設定などが完了した後に実行されます。
- このフックでは、データの初期化や非同期のデータの取得などを行うことができます。
beforeMount: コンポーネントがDOMにマウントされる前に実行されます。
- このフックでは、テンプレートのコンパイルが完了し、レンダリングの準備が整った後に実行されるため、DOMにアクセスすることができます。
mounted: コンポーネントがDOMに正常にマウントされた後に実行されます。
- このフックでは、DOM要素に対する操作や外部ライブラリの初期化など、コンポーネントのマウント後に必要な処理を行うことができます。
beforeUpdate: データが変更され、DOMが更新される前に実行されます。
- このフックでは、変更前のデータやDOMの状態にアクセスすることができます。
updated: データが変更され、DOMが更新された後に実行されます。
- このフックでは、DOMの変更後の状態にアクセスすることができます。
- ただし、このフック内でのデータの変更は避ける必要があります（無限ループの原因となります）。
beforeDestroy: コンポーネントが破棄される前に実行されます。
- このフックでは、コンポーネントが破棄される前に必要なクリーンアップやリソースの解放を行うことができます。
destroyed: コンポーネントが完全に破棄された後に実行されます。
- このフックでは、コンポーネントが破棄された後のクリーンアップや後処理を行うことができます。

これらのライフサイクルフックは、コンポーネントの各段階で特定のタスクを実行するために、活用できます。

ライフサイクルフックの SampleCodeまとめ

<template>
  <!-- document is not defined などの SSR_Error を防止する: no-ssrタグ -->
  <no-ssr>
    <div>
      <h2>Robotama_LifeCycle_Hooks</h2>
    </div>
  </no-ssr>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  // 1. beforeCreate_Timing
  beforeCreate() {
    console.log("Component_BeforeCreate");
  },
  // 2. created_Timing
  created() {
    console.log("Component_Created");
  },
  // 3. beforeMount_Timing
  beforeMount() {
    console.log("Component_BeforeMounted");
  },
  // 4. mounted_Timing
  mounted() {
    console.log("Component_Mounted");
  },
  // 5. beforeUpdate_Timing
  beforeUpdate() {
    console.log("Component_BeforeUpdated");
  },
  // 6. updated_Timing
  updated() {
    console.log("Component_Updated");
  },
  // 7. beforeDestroy_Timing
  beforeDestroy() {
    console.log("Component_BeforeDestoryed");
  },
  // 8. destroyed_Timing
  destroyed() {
    console.log("Component_Destoryed");
  },
};
</script>
<style></style>