搜索文档 /

Vue生命周期

本指南讨论了如何在Ionic Vue应用程序中使用Ionic Framebetway东盟体育appwork生命周期事件。

betway东盟体育app离子框架生命周期方法

betway东盟体育appIonic Framework提供了一些你可以在应用程序中使用的生命周期方法:

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

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


              进口
             
              
             伊恩佩奇
              
             
              
             
              “@betway东盟体育appionic / vue”
              
             
              进口
             
              
             defineComponent
              
             
              
             
              “vue”
              
             
              出口
             
              默认的
             
              defineComponent
              
              
             的名字
              
             
              “家”
              
             
              ionViewDidEnter
              
              
             
              
             
              安慰
              
              日志
              
              '主页确实进入'
              
              
             
              
              
             
              ionViewDidLeave
              
              
             
              
             
              安慰
              
              日志
              
              “主页确实离开了”
              
              
             
              
              
             
              ionViewWillEnter
              
              
             
              
             
              安慰
              
              日志
              
              “将进入主页”
              
              
             
              
              
             
              ionViewWillLeave
              
              
             
              
             
              安慰
              
              日志
              
              “主页将离开”
              
              
             
              
              
             组件
              
             
              
             伊恩佩奇
              
             
              
              
复制 复制

构成API钩子

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


              进口
             
              
             伊恩佩奇
              
             onIonViewWillEnter
              
             onIonViewDidEnter
              
             onIonViewWillLeave
              
             onIonViewDidLeave
              
             
              
             
              “@betway东盟体育appionic / vue”
              
             
              进口
             
              
             defineComponent
              
             
              
             
              “vue”
              
             
              出口
             
              默认的
             
              defineComponent
              
              
             的名字
              
             
              “家”
              
             组件
              
             
              
             伊恩佩奇
              
              
             
              设置
              
              
             
              
             
              onIonViewDidEnter
              
              
              
             
              =>
             
              
             
              安慰
              
              日志
              
              '主页确实进入'
              
              
             
              
              
              
             
              onIonViewDidLeave
              
              
              
             
              =>
             
              
             
              安慰
              
              日志
              
              “主页确实离开了”
              
              
             
              
              
              
             
              onIonViewWillEnter
              
              
              
             
              =>
             
              
             
              安慰
              
              日志
              
              “将进入主页”
              
              
             
              
              
              
             
              onIonViewWillLeave
              
              
              
             
              =>
             
              
             
              安慰
              
              日志
              
              “主页将离开”
              
              
             
              
              
              
             
              
             
              
              
复制 复制

应用程序中的页面需要使用 伊恩佩奇 组件以使生命周期方法和钩子正确触发。

离子框架betway东盟体育app如何处理页面的生命周期

betway东盟体育app离子框架有它的路由器出口,称为 <离子路由器出口> .这个出口扩展了Vue路由器的出口 < router-view > 具有一些附加功能,可为移动设备提供更好的体验。

当应用程序包装在 <离子路由器出口> 在《betway东盟体育appIonic Framework》中,导航有一点不同。当您导航到一个新页面时,Ionic Framework会将旧页面保betway东盟体育app留在现有的DOM中,但将其隐藏在您的视图中,并转换新页面。我们这样做的原因有两个:

1)我们可以保持旧页面的状态(屏幕上的数据,滚动位置等)。2)我们可以提供一个平滑的过渡,回到页面,因为它已经在那里,不需要创建。

页面只有在“弹出”时才会从DOM中删除,例如,通过按UI中的“后退”按钮或“浏览器后退”按钮。

由于这种特殊处理,某些Vue路由器组件,如 <维生> < >过渡 , < router-view > 不应在离子型Vue应用中使用。此外,这里不需betway东盟体育app要Vue路由器的滚动行为API,因为每个页面的滚动位置都会自动保留。

Vue中的所有生命周期方法( 安装 beforeUnmount ,等等。)也可供您使用。然而,由于Ionic Vue管betway东盟体育app理页面的生命周期,某些事件可能不会在您预期的时候触发。例如, 安装 在页面第一次显示时触发,但如果您导航离开页面,Ionic Framework可能会将页面保存在DOM中,随后对页面的访问可能不会调用betway东盟体育app 安装 再一次此场景是存在Ionic Framework生命周期方法的主要原因,它仍然为您提供了betway东盟体育app在视图进入和退出时调用逻辑的方法,而本机框架的事件可能不会触发。

每个生命周期方法的指导

下面是关于每个生命周期事件的用例的一些技巧。

  • ionViewWillEnter ——因为 ionViewWillEnter 在每次导航到视图时调用(无论是否初始化),它是从服务加载数据的好方法。
  • ionViewDidEnter —如果您在使用过程中看到性能问题 ionViewWillEnter 加载数据时,您可以在中进行数据调用 ionViewDidEnter 代替。但是,这个事件在页面对用户可见之前不会触发,所以您可能希望使用加载指示符或骨架屏幕,例如 ion-skeleton-text ,这样在过渡完成后,内容就不会不自然地闪现出来。
  • ionViewWillLeave -可用于清理,如取消订阅数据源。自 beforeUnmount 当您从当前页面导航时可能不会触发,如果您不想在屏幕不在视图中时激活清理代码,请将其放在这里。
  • ionViewDidLeave -当这个事件触发时,你知道新页面已经完全过渡,所以任何你可能不会做的逻辑,当视图是可见的,可以到这里。
以前的
您的第一个应用程序
下一个
航行
Baidu