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:

<script setup lang="ts">
import { IonPage } from '@ionic/vue';

const ionViewDidEnter = () => {
  console.log('Home page did enter');
};

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

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

const ionViewWillLeave = () => {
  console.log('Home page will leave');
};
</script>

组合 API 钩子​

🌐 Composition API Hooks

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

🌐 These lifecycles can also be expressed using Vue 3's Composition API:

<script setup lang="ts">
import { IonPage, onIonViewWillEnter, onIonViewDidEnter, onIonViewWillLeave, onIonViewDidLeave } from '@ionic/vue';

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');
});
</script>
note

你的应用中的页面需要使用 IonPage 组件，以便生命周期方法和钩子能够正常触发。

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

🌐 How Ionic Framework Handles the Life of a Page

Ionic 框架有它的路由出口，称为 <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 框架对导航的处理会略有不同。当你导航到一个新页面时，Ionic 框架会将旧页面保留在现有的 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. 我们可以维护旧页面的状态（屏幕上的数据、滚动位置等......）。
  2. 我们可以提供返回页面的更平滑的过渡，因为它已经存在并且不需要创建。

页面只有在被“弹出”时才会从 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 框架可能会将页面保留在 DOM 中，随后的访问可能不会再次调用 mounted。这种情况是 Ionic 框架生命周期方法存在的主要原因，它仍然为你提供了一种在视图进入和退出时调用逻辑的方法，即使原生框架的事件可能不会触发。

🌐 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（无论是否已初始化），它是从服务加载数据的一个好方法。
  • ionViewDidEnter - 如果你在使用 ionViewWillEnter 加载数据时遇到性能问题，可以改为在 ionViewDidEnter 中进行数据调用。然而，这个事件要等到页面对用户可见后才会触发，所以你可能需要使用加载指示器或骨架屏，例如 ion-skeleton-text，以避免内容在过渡完成后不自然地闪现。
  • ionViewWillLeave - 可以用于清理，例如取消订阅数据源。由于在从当前页面导航时 beforeUnmount 可能不会触发，如果你不希望在屏幕不在视图中时其活动，请将清理代码放在这里。
  • ionViewDidLeave - 当此事件触发时，你知道新页面已完全转换，因此当视图可见时你通常不会执行的任何逻辑都可以转到此处。

目录