Vue.jsにおけるインスタンスのライフサイクルは、生成からマウント、更新、破棄に至る一連の内部処理段階を指します。これらの段階にはそれぞれ対応するフック関数が存在し、開発者は特定のタイミングでカスタムロジックを挿入できます。

主要なライフサイクルフック

• beforeCreate：インスタンス初期化直前。リアクティブデータやイベントリスナーは未設定。
• created：データ観測・計算プロパティ・メソッドが利用可能。DOMはまだ存在しない。
• beforeMount：テンプレートコンパイル完了後、実DOMへの反映直前。
• mounted：仮想DOMが実DOMにマウント済み。this.$el経由で要素操作可能。
• beforeUpdate：データ変更検知後、再描画前のタイミング。古いDOM状態を参照可能。
• updated：再描画完了後。最新のDOM状態に基づく操作を実行可能。
• beforeUnmount（※Vue3表記） / beforeDestroy：破棄直前。リソースのクリーンアップに最適。
• unmounted（※Vue3表記） / destroyed：インスタンス完全破棄後。参照不可。

実践的なコード例

<template>
  <div class="container">
    <h2>{{ greeting }}</h2>
    <button @click="changeGreeting">挨拶を変更</button>
  </div>
</template>

<script>
export default {
  name: 'LifecycleDemo',
  data() {
    return {
      greeting: 'ようこそ Vue.js へ！'
    };
  },
  beforeCreate() {
    console.log('[初期化前] データ未定義');
  },
  created() {
    console.log('[生成後] データ初期化完了:', this.greeting);
    // API呼び出しや初期データ取得に最適
  },
  beforeMount() {
    console.log('[マウント前] テンプレート準備完了');
  },
  mounted() {
    console.log('[マウント後] DOM操作可能');
    // サードパーティライブラリの初期化やアニメーション開始
  },
  beforeUpdate() {
    console.log('[更新前] 変更前の値:', this.greeting);
  },
  updated() {
    console.log('[更新後] DOM再描画完了');
    // 更新後のDOMサイズ計測など
  },
  beforeUnmount() {
    console.log('[破棄前] クリーンアップ開始');
    // タイマー解除やイベントリスナー削除
  },
  methods: {
    changeGreeting() {
      this.greeting = 'こんにちは、世界！';
    }
  }
};
</script>

上記コードを実行すると、初回レンダリング時に以下の順序でログが出力されます：

[初期化前] データ未定義
[生成後] データ初期化完了: ようこそ Vue.js へ！
[マウント前] テンプレート準備完了
[マウント後] DOM操作可能

ボタンクリック後には追加で以下が出力されます：

[更新前] 変更前の値: ようこそ Vue.js へ！
[更新後] DOM再描画完了

明示的にインスタンスを破棄する場合は、this.$destroy()（Vue2）またはapp.unmount()（Vue3）を使用します。ただし、通常のコンポーネントでは自動管理されるため、手動破棄は特殊なユースケースに限定されます。