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

Question

Ionic 文档描述了如何在 Vue method.

中使用 ionViewWillEnter、ionViewDidEnter 等 Ionic 生命周期方法

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
      };
   }
});

Answer 1

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

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

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

意思是你可以这样做：

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

Answer 2

由于合并了此 PR，现在可以在组合 API 样式中使用

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

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

Answer 3

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

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

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

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

Ionic 5, Vue 3 - How to use Ionic lifecycle hooks inside setup()?

vue.js

vuejs3

ionic5