SPA（SinglePageApplication）のライフサイクルについて（Vue.js）

SPA（Single Page Application） では、ページ遷移がなく、コンテンツの一部だけを動的に更新するため、Vueのコンポーネントライフサイクルは通常のページ遷移の際のものとは少し異なります。しかし、基本的なライフサイクルメソッドは同様に動作します。

1. 通常のライフサイクルメソッドとSPAでの違い

通常のページ遷移（複数ページアプリケーション）:

ページがロードされるたびに、ページのリロードが発生し、その都度Vueコンポーネントがマウントされます。

SPA（Single Page Application）:

ページ遷移があっても、ブラウザのページ全体のリロードは発生しません。
Vue Routerを使ってビューが変更されるため、コンポーネントのライフサイクルは、ページ遷移ごとに完全に再度実行されるわけではありません。
新しいコンポーネントがロードされると、ライフサイクルメソッドが実行されますが、既存のコンポーネントはアンマウントされずに再利用される場合もあります。

2. SPAでの主なライフサイクル

created: コンポーネントがインスタンス化され、データのセットアップが完了した時点で呼ばれます。ページ遷移時にも再実行されますが、現在表示されているコンポーネントがすでに表示されていれば、再実行されない場合があります。
mounted: コンポーネントがDOMにマウントされ、画面に描画された後に呼ばれます。SPAでは、ルート遷移によって新しいコンポーネントがマウントされる際に実行されますが、ページ全体のリロードがないため、前のコンポーネントがアンマウントされることなく、新しいコンポーネントがマウントされます。
beforeRouteEnter: Vue Routerを使用している場合、ページ遷移前に実行されるライフサイクルメソッドです。このメソッドはコンポーネントがマウントされる前に呼ばれるため、コンポーネントのDOMにアクセスすることはできませんが、ページ遷移前に処理を挟みたい場合に使用します。
beforeRouteLeave: このメソッドは、ルートを離れるときに呼ばれ、次のルートに遷移する前に実行されます。コンポーネントのアンマウント前に処理をしたい場合に使います。
beforeDestroy / destroyed:
- **beforeDestroy**はコンポーネントが破棄される直前に呼ばれますが、SPAの場合、ルートが遷移する前に表示されていたコンポーネントが破棄されます。
- **destroyed**はコンポーネントが完全に破棄された後に呼ばれます。
- これらは、ルートの切り替え時にコンポーネントがアンマウントされる際に実行されます。

3. Vue Routerとの関連

VueのライフサイクルメソッドとVue Routerの組み合わせにより、コンポーネントのライフサイクルはルート遷移に密接に関連します。例えば、Vue Routerの<router-view>を使用して、ルートが変更されるたびにコンポーネントが動的に切り替わるので、その際にコンポーネントのライフサイクルメソッドが呼ばれます。

ルート遷移時に新しいコンポーネントがマウントされると、created → mounted が呼ばれます。
古いコンポーネントは、必要に応じてbeforeDestroy → destroyedで破棄されます。
beforeRouteEnterやbeforeRouteLeaveはルート遷移時に処理を加えたい場合に有用です。

4. ライフサイクルの例：SPAにおける動作

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Initial message'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  methods: {
    changeMessage() {
      this.message = 'Message updated';
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log('Before route enter');
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('Before route leave');
    next();
  }
};
</script>

5. SPAのライフサイクルの流れ

初回表示:
- ページが最初に表示されたとき、コンポーネントがマウントされるときに、created → mounted が呼ばれます。
ルート遷移:
- Vue Routerで新しいルートに遷移すると、beforeRouteEnter → created → mounted が順番に呼ばれます。
- 古いコンポーネントは、beforeRouteLeave → beforeDestroy → destroyed の順で破棄されます。

6. まとめ

SPAでは、コンポーネントのライフサイクルが通常のページ遷移とは異なります。
ページ遷移時にページ全体がリロードされないため、コンポーネントの再マウントやアンマウントはルート遷移に基づいて行われ、createdやmountedなどのライフサイクルメソッドが再実行されます。
Vue Routerと組み合わせて、コンポーネントのライフサイクルを細かく制御できるため、SPAでも効率的に状態管理や処理を行うことができます。