メインコンテンツへスキップ
バージョン: v8

Vue ライフサイクル

このガイドでは、Ionic Vue アプリケーションで Ionic Framework のライフサイクルイベントを使用する方法について説明します。

Ionic Framework ライフサイクルメソッド​

Ionic Framework は、アプリで使用できるいくつかのライフサイクルメソッドを提供します。

イベント名説明
ionViewWillEnterルーティング先のコンポーネントが表示される直前に発生します。
ionViewDidEnterルーティング先のコンポーネントのアニメーションが完了した後に発生します。
ionViewWillLeaveルーティング元のコンポーネントがアニメーションされる直前に発生します。
ionViewDidLeaveルーティング元のコンポーネントのアニメーションが完了した後に発生します。

これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントでのみ呼び出されます。つまり、/pageOneがPageOneComponentにマップされている場合、Ionic ライフサイクルはPageOneComponentで呼び出されますが、PageOneComponentがレンダリングする可能性のある子コンポーネントでは呼び出されません。

ライフサイクルは、Vue ライフサイクルメソッドと同じ方法で定義されます。つまり、Vue コンポーネントのルートにある関数として定義します。

import { IonPage } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  ionViewDidEnter() {
    console.log('Home page did enter');
  },
  ionViewDidLeave() {
    console.log('Home page did leave');
  },
  ionViewWillEnter() {
    console.log('Home page will enter');
  },
  ionViewWillLeave() {
    console.log('Home page will leave');
  },
  components: {
    IonPage,
  },
});

Composition API フック​

これらのライフサイクルは、Vue 3 の Composition API を使用して表現することもできます。

import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonPage,
  },
  setup() {
    onIonViewDidEnter(() => {
      console.log('Home page did enter');
    });

    onIonViewDidLeave(() => {
      console.log('Home page did leave');
    });

    onIonViewWillEnter(() => {
      console.log('Home page will enter');
    });

    onIonViewWillLeave(() => {
      console.log('Home page will leave');
    });
  },
});
注記

アプリのページでライフサイクルメソッドとフックを正しく実行するには、IonPageコンポーネントを使用する必要があります。

Ionic Framework がページのライフサイクルを処理する方法​

Ionic Framework には、<ion-router-outlet>と呼ばれるルーターアウトレットがあります。このアウトレットは、Vue Router の<router-view>を拡張し、モバイルデバイスでより優れたエクスペリエンスを実現するための追加機能を提供します。

アプリが<ion-router-outlet>でラップされている場合、Ionic Framework はナビゲーションを少し異なる方法で処理します。新しいページにナビゲートすると、Ionic Framework は古いページを既存の DOM に保持しますが、ビューから非表示にして新しいページをトランジションします。このようにする理由は2つあります。

  1. 古いページの状態（画面上のデータ、スクロール位置など）を維持できます。
  2. 古いページは既に存在し、作成する必要がないため、ページへのスムーズなトランジションを提供できます。

ページは、UIの戻るボタンまたはブラウザの戻るボタンを押すなどして「ポップ」された場合にのみ、DOM から削除されます。

この特別な処理のために、<keep-alive>、<transition>、<router-view>などの特定の Vue Router コンポーネントは、Ionic Vue アプリケーションでは使用しないでください。さらに、各ページのスクロール位置は自動的に保存されるため、Vue Router のスクロール動作API はここでは必要ありません。

Vue のすべてのライフサイクルメソッド（mounted、beforeUnmountなど）も使用できます。ただし、Ionic Vue はページのライフタイムを管理するため、特定のイベントは期待どおりに発生しない場合があります。たとえば、mountedはページが最初に表示されたときに発生しますが、ページから離れると、Ionic Framework はページを DOM に保持する場合があり、そのページへの後続のアクセスではmountedが再度呼び出されない場合があります。このシナリオは、ネイティブフレームワークのイベントが発生しない場合でも、ビューが出入りする際にロジックを呼び出す方法を提供するために、Ionic Framework ライフサイクルメソッドが存在する主な理由です。

各ライフサイクルメソッドに関するガイダンス​

以下は、各ライフサイクルイベントのユースケースに関するヒントです。

  • ionViewWillEnter - ionViewWillEnterはビューにナビゲートされるたびに（初期化されているかどうかに関係なく）呼び出されるため、サービスからデータを読み込むのに適したメソッドです。
  • ionViewDidEnter - データの読み込み時にionViewWillEnterを使用することでパフォーマンスの問題が発生する場合は、代わりにionViewDidEnterでデータ呼び出しを実行できます。ただし、このイベントはページがユーザーに表示された後まで発生しないため、ローディングインジケーターまたはion-skeleton-textなどのスケルトン画面を使用して、トランジションが完了した後にコンテンツが不自然に点滅しないようにする必要があります。
  • ionViewWillLeave - データソースの購読解除など、クリーンアップに使用できます。現在のページから離れるときにbeforeUnmountが発生しない可能性があるため、画面が表示されていない間はアクティブにしない場合は、クリーンアップコードをここに配置します。
  • ionViewDidLeave - このイベントが発生すると、新しいページが完全に遷移したことがわかるため、ビューが表示されている間は通常行わないロジックをここに配置できます。

目次

このページを編集する