Skip to main content

Vue 生命周期

¥Vue Lifecycle

本指南讨论如何在 Ionic Vue 应用中使用 Ionic Framework 生命周期事件。

¥This guide discusses how to use the Ionic Framework Lifecycle events in an Ionic Vue application.

Ionic 框架生命周期方法​

¥Ionic Framework Lifecycle Methods

Ionic Framework 提供了一些可以在应用中使用的生命周期方法：

¥Ionic Framework provides a few lifecycle methods that you can use in your apps:

活动名称描述
ionViewWillEnter当组件路由即将动画进入视图时触发。
ionViewDidEnter当组件路由完成动画时触发。
ionViewWillLeave当组件路由即将动画时触发。
ionViewDidLeave当组件路由完成动画时触发。

这些生命周期仅在由路由直接映射的组件上调用。这意味着如果 /pageOne 映射到 PageOneComponent，则 Ionic 生命周期将在 PageOneComponent 上调用，但不会在 PageOneComponent 可能渲染的任何子组件上调用。

¥These lifecycles are only called on components directly mapped by a router. This means if /pageOne maps to PageOneComponent, then Ionic lifecycles will be called on PageOneComponent but will not be called on any child components that PageOneComponent may render.

生命周期的定义方式与 Vue 生命周期方法相同 - 作为 Vue 组件根部的函数：

¥The lifecycles are defined the same way Vue lifecycle methods are - as functions at the root of your Vue component:



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 钩子​

¥Composition API Hooks

这些生命周期也可以使用 Vue 3 的 Composition API 来表达：

¥These lifecycles can also be expressed using Vue 3's 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 组件才能正确触发生命周期方法和钩子。

¥Pages in your app need to be using the IonPage component in order for lifecycle methods and hooks to fire properly.

Ionic 框架如何处理页面的生命周期​

¥How Ionic Framework Handles the Life of a Page

Ionic Framework 有其路由出口，称为 <ion-router-outlet>。该插座通过一些附加功能扩展了 Vue Router 的 <router-view>，以便为移动设备提供更好的体验。

¥Ionic Framework has its router outlet, called <ion-router-outlet>. This outlet extends Vue Router's <router-view> with some additional functionality to enable better experiences for mobile devices.

当应用封装在 <ion-router-outlet> 中时，Ionic Framework 对待导航的方式略有不同。当你导航到新页面时，Ionic Framework 会将旧页面保留在现有 DOM 中，但将其从你的视图中隐藏并转换新页面。我们这样做的原因有两个：

¥When an app is wrapped in <ion-router-outlet>, Ionic Framework treats navigation a bit differently. When you navigate to a new page, Ionic Framework will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold:

  1. 我们可以维护旧页面的状态（屏幕上的数据、滚动位置等......）。

    ¥We can maintain the state of the old page (data on the screen, scroll position, etc...).

  2. 我们可以提供返回页面的更平滑的过渡，因为它已经存在并且不需要创建。

    ¥We can provide a smoother transition back to the page since it is already there and does not need to be created.

仅当页面为 "popped" 时，才会从 DOM 中删除页面，例如，通过按 UI 中的后退按钮或浏览器后退按钮。

¥Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button.

由于这种特殊处理，某些 Vue Router 组件（例如 <keep-alive>、<transition> 和 <router-view>）不应在 Ionic Vue 应用中使用。此外，这里不需要 Vue Router 的滚动行为 API，因为每个页面的滚动位置都会自动保留。

¥Because of this special handling, certain Vue Router components such as <keep-alive>, <transition>, and <router-view> should not be used in Ionic Vue applications. Additionally, Vue Router's Scroll Behavior API is not needed here as each page's scroll position is preserved automatically.

Vue 中的所有生命周期方法（mounted、beforeUnmount 等）也可供你使用。然而，由于 Ionic Vue 管理页面的生命周期，某些事件可能不会在你期望的时候触发。例如，第一次显示页面时，mounted 会触发，但如果你离开该页面，Ionic Framework 可能会将该页面保留在 DOM 中，并且对该页面的后续访问可能不会再次调用 mounted。这种情况是 Ionic Framework 生命周期方法存在的主要原因，当原生框架的事件可能不会触发时，仍然为你提供了一种在视图进入和退出时调用逻辑的方法。

¥All the lifecycle methods in Vue (mounted, beforeUnmount, etc..) are available for you to use as well. However, since Ionic Vue manages the lifetime of a page, certain events might not fire when you expect them to. For instance, mounted fires the first time a page is displayed, but if you navigate away from the page Ionic Framework might keep the page around in the DOM, and a subsequent visit to the page might not call mounted again. This scenario is the main reason the Ionic Framework lifecycle methods exist, to still give you a way to call logic when views enter and exit when the native framework's events might not fire.

每种生命周期方法的指南​

¥Guidance for Each Lifecycle Method

以下是有关每个生命周期事件用例的一些提示。

¥Below are some tips on use cases for each of the life cycle events.

  • ionViewWillEnter - 由于每次导航到视图时都会调用 ionViewWillEnter（无论是否初始化），因此这是从服务加载数据的好方法。

    ¥ionViewWillEnter - Since ionViewWillEnter is called every time the view is navigated to (regardless if initialized or not), it is a good method to load data from services.

  • ionViewDidEnter - 如果你在加载数据时发现使用 ionViewWillEnter 存在性能问题，则可以改为在 ionViewDidEnter 中进行数据调用。但是，直到用户看到页面后才会触发此事件，因此你可能需要使用加载指示器或骨架屏幕（例如 ion-skeleton-text），以便在转换完成后内容不会不自然地闪烁。

    ¥ionViewDidEnter - If you see performance problems from using ionViewWillEnter when loading data, you can do your data calls in ionViewDidEnter instead. However, this event will not fire until after the page is visible to the user, so you might want to use either a loading indicator or a skeleton screen such as ion-skeleton-text, so content does not flash in un-naturally after the transition is complete.

  • ionViewWillLeave - 可用于清理，例如取消订阅数据源。由于从当前页面导航时 beforeUnmount 可能不会触发，因此如果你不希望在屏幕未显示时激活清理代码，请将清理代码放在这里。

    ¥ionViewWillLeave - Can be used for cleanup, like unsubscribing from data sources. Since beforeUnmount might not fire when you navigate from the current page, put your cleanup code here if you do not want it active while the screen is not in view.

  • ionViewDidLeave - 当此事件触发时，你知道新页面已完全转换，因此当视图可见时你通常不会执行的任何逻辑都可以转到此处。

    ¥ionViewDidLeave - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here.

目录