跳至主要內容
版本：v8

Vue 生命周期

本指南討論如何在 Ionic Vue 應用程式中使用 Ionic Framework 生命周期事件。

Ionic Framework 生命周期方法​

Ionic Framework 提供了一些可以在您的應用程式中使用的生命週期方法

事件名稱說明
ionViewWillEnter當路由到的元件即將動畫進入檢視時觸發。
ionViewDidEnter當路由到的元件完成動畫時觸發。
ionViewWillLeave當路由自的元件即將動畫時觸發。
ionViewDidLeave當路由自的元件完成動畫時觸發。

這些生命週期僅在路由器直接對應的元件上呼叫。這表示如果 /pageOne 對應到 PageOneComponent，則會在 PageOneComponent 上呼叫 Ionic 生命周期，但不會在 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 Hook​

這些生命週期也可以使用 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 元件，才能正確觸發生命週期方法和 hook。

Ionic Framework 如何處理頁面的生命週期​

Ionic Framework 有其路由器輸出，稱為 <ion-router-outlet>。此輸出擴充了 Vue Router 的 <router-view>，並新增了一些額外功能，以便為行動裝置提供更好的體驗。

當應用程式包裝在 <ion-router-outlet> 中時，Ionic Framework 會以稍微不同的方式處理導航。當您導航到新頁面時，Ionic Framework 會將舊頁面保留在現有的 DOM 中，但會將其從您的檢視中隱藏，並轉換新頁面。我們這樣做的原因有兩個：

  1. 我們可以維護舊頁面的狀態（螢幕上的資料、滾動位置等）。
  2. 由於頁面已存在且不需要建立，因此我們可以提供更順暢的回到頁面的轉換。

只有當頁面被「彈出」時，才會從 DOM 中移除，例如，按一下 UI 中的返回按鈕或瀏覽器的返回按鈕。

由於這種特殊的處理方式，因此不應在 Ionic Vue 應用程式中使用某些 Vue Router 元件，例如 <keep-alive>、<transition> 和 <router-view>。此外，這裡不需要 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 - 當此事件觸發時，您知道新頁面已完全轉換，因此您可能通常在檢視可見時不會執行的任何邏輯都可以放在這裡。

內容

編輯此頁面