Vue.jsのライフサイクル

Vueインスタンスのライフサイクルは、生成から破棄までの全過程を指します。このプロセスは4つの主要フェーズに分類され、各段階で特定の処理が実行されます。

ライフサイクルの4フェーズ

• 生成フェーズ: リアクティブデータの初期化とインスタンス設定
• マウントフェーズ: テンプレートのコンパイルとDOMへの描画
• 更新フェーズ: データ変更に伴うビューの再レンダリング
• 破棄フェーズ: インスタンスの解体とリソース解放

ライフサイクルフック関数

各フェーズには対応するフック関数があり、特定のタイミングでコードを実行できます。

生成フェーズのフック

• beforeCreate: インスタンス初期化直後に呼ばれ、データ観測が未設定
• created: インスタンス生成完了後、データアクセス可能だがDOM未生成

マウントフェーズのフック

• beforeMount: DOMマウント前、テンプレートコンパイル済み
• mounted: DOMマウント完了後、DOM操作可能

更新フェーズのフック

• beforeUpdate: データ変更による再レンダリング前
• updated: 再レンダリング完了後

破棄フェーズのフック

• beforeDestroy: インスタンス破棄前、リソース解放処理
• destroyed: インスタンス破棄後、全リソース解放済み

createdフックの実装例

ページロード時のデータ取得と表示（DOM操作不要）

<div id="app">
  <ul>
    <li v-for="post in blogPosts" :key="post.id" class="post-item">
      <div class="content">
        <h3 class="heading">{{ post.heading }}</h3>
        <div class="meta">
          <span>{{ post.author }}</span>
          <span>{{ post.date }}</span>
        </div>
      </div>
      <div class="thumbnail">
        <img :src="post.thumbnail" alt="">
      </div>
    </li>
  </ul>
</div>

<script>
const vm = new Vue({
  el: '#app',
  data: { blogPosts: [] },
  async created() {
    const response = await axios.get('https://api.example.com/posts');
    this.blogPosts = response.data.items;
  }
});
</script>

mountedフックの実装例

ページロード時の入力フィールドフォーカス設定（DOM操作必要）

<div id="searchApp">
  <div class="search-area">
    <div class="input-group">
      <input type="text" v-model="searchTerm" ref="searchField">
      <button>検索</button>
    </div>
  </div>
</div>

<script>
const searchApp = new Vue({
  el: '#searchApp',
  data: { searchTerm: '' },
  mounted() {
    this.$refs.searchField.focus();
  }
});
</script>