Ionic 5，Vue 3 - 如何在 setup() 中使用 Ionic 生命周期挂钩？答案

【问题标题】：Ionic 5, Vue 3 - How to use Ionic lifecycle hooks inside setup()?Ionic 5，Vue 3 - 如何在 setup() 中使用 Ionic 生命周期挂钩？
【发布时间】：2021-01-25 11:53:29
【问题描述】：

Ionic 文档描述了如何在 Vue method 中使用离子生命周期方法，例如 ionViewWillEnter、ionViewDidEnter 等。

https://ionicframework.com/docs/vue/lifecycle

我正在寻找一种在新的 Vue 3 setup() 方法中访问它们的方法，以便能够访问那里定义的属性。有没有可能？

export default defineComponent({
   ...
   setup(){
      const list = ref([]);

      // I need something like this
      const ionViewDidEnter = () => {
         list.value.push(...['some', 'array', 'here']);
      },

      return {
         list,
         ionViewDidEnter
      };
   }
});

【问题讨论】：

我建议你使用标准的 vue 生命周期方法之一，直到 ionic 版本完全烘焙，离子生命周期事件是 vue 事件之上的语法糖
@AaronSaunders，好主意，但在标签工作流程方面，没有一个 vue 事件与 ionViewWillEnter 或 ionViewDidEnter 相同。
然后收听选项卡事件，每当标签更改时都有侦听器。如果您可以更具体地了解您尝试的内容，这使得它更容易回答......您现在刚刚提及选项卡，并且在最初的问题中没有提到

标签： vue.js ionic5 vuejs3

【解决方案1】：

由于此 PR 已合并，因此现在可以在组合 API 样式中实现这一点

https://github.com/ionic-team/ionic-framework/pull/22970

export default defineComponent({
  ...,
  components: { IonPage },
  setup() {
    onIonViewDidEnter(() => {
      console.log('ionViewDidEnter!');
    });
  }
});

【讨论】：

【解决方案2】：

不幸的是，没有，至少现在还没有，因为触发事件的代码专门寻找要注册为组件方法的一部分的生命周期事件。幸运的是，我已经提交了一个 PR，它将解决这个问题，并允许您以与定义挂载或任何其他 Vue 钩子相同的方式定义它们。

我将确保添加涵盖组合 API 场景的测试。

https://github.com/ionic-team/ionic-framework/pull/22241

意味着你可以这样做：

export default defineComponent({
   ...
   ionViewDidEnter() {
     ...
   },
   setup(){
     ...
   }
});

【讨论】：

既然 PR 已合并，我该如何在 setup 中准确调用离子生命周期挂钩？官方文档并没有说太多...

【解决方案3】：

为了补充 Mark Beech 所说的，您必须导入 onIonViewDidEnter

import { onIonViewDidEnter } from '@ionic/vue';

export default defineComponent({
   ...
   ionViewDidEnter() {
      console.log('Hompage');
   },
   setup(){
     ...
   }
});

【讨论】：