跳至主要内容
版本: 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,
  },
});

组合 API 钩子​

这些生命周期也可以使用 Vue 3 的组合 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 中，但将其从视图中隐藏，并转换新页面。我们这样做有两个原因。

  1. 我们可以维护旧页面的状态（屏幕上的数据、滚动位置等）。
  2. 我们可以提供更流畅的页面转换，因为它已经存在，不需要创建。

页面仅在“弹出”时从 DOM 中删除，例如通过按下 UI 中的后退按钮或浏览器的后退按钮。

由于这种特殊处理，某些 Vue Router 组件（例如 <keep-alive>、<transition> 和 <router-view>）不应该在 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 - 当此事件触发时，您就知道新页面已完全转换完成，因此您可以在这里执行通常在视图可见时不会执行的任何逻辑。

目录

编辑此页面