javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(vue): add composition API ionic lifecycle hooks (#22970)

Browse Source 
resolves #22769
This commit is contained in:
Liam DeBeasi
2021-03-01 10:35:25 -05:00
committed by GitHub
parent 9486e51f6d
commit dd1c8dbf3b
6 changed files with 134 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/vue/test-app/src/views/Lifecycle.vue
View File

@ -22,6 +22,11 @@
ionViewWillLeave: <div id="willLeave">{{ willLeave }}</div><br />
ionViewDidLeave: <div id="didLeave">{{ didLeave }}</div><br />
onIonViewWillEnter: <div id="onWillEnter">{{ onWillEnter }}</div><br />
onIonViewDidEnter: <div id="onDidEnter">{{ onDidEnter }}</div><br />
onIonViewWillLeave: <div id="onWillLeave">{{ onWillLeave }}</div><br />
onIonViewDidLeave: <div id="onDidLeave">{{ onDidLeave }}</div><br />
<ion-button router-link="/navigation" id="lifecycle-navigation">Go to another page</ion-button>
</div>
</ion-content>
@ -37,9 +42,13 @@ import {
IonHeader,
IonPage,
IonTitle,
IonToolbar
IonToolbar,
onIonViewWillEnter,
onIonViewDidEnter,
onIonViewWillLeave,
onIonViewDidLeave
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
IonButton,
@ -65,6 +74,24 @@ export default defineComponent({
this.didLeave++;
}
},
setup() {
const onWillEnter = ref(0);
const onDidEnter = ref(0);
const onWillLeave = ref(0);
const onDidLeave = ref(0);
onIonViewWillEnter(() => onWillEnter.value += 1);
onIonViewDidEnter(() => onDidEnter.value += 1);
onIonViewWillLeave(() => onWillLeave.value += 1);
onIonViewDidLeave(() => onDidLeave.value += 1);
return {
onWillEnter,
onDidEnter,
onWillLeave,
onDidLeave
}
},
data() {
return {
willEnter: 0,