javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +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,

29
packages/vue/test-app/tests/e2e/specs/lifecycle.js
View File

@ -7,7 +7,11 @@ describe('Lifecycle', () => {
ionViewWillEnter: 1,
ionViewDidEnter: 1,
ionViewWillLeave: 0,
ionViewDidLeave: 0
ionViewDidLeave: 0,
onIonViewWillEnter: 1,
onIonViewDidEnter: 1,
onIonViewWillLeave: 0,
onIonViewDidLeave: 0
});
cy.get('#lifecycle-navigation').click();
@ -16,7 +20,11 @@ describe('Lifecycle', () => {
ionViewWillEnter: 1,
ionViewDidEnter: 1,
ionViewWillLeave: 1,
ionViewDidLeave: 1
ionViewDidLeave: 1,
onIonViewWillEnter: 1,
onIonViewDidEnter: 1,
onIonViewWillLeave: 1,
onIonViewDidLeave: 1
});
cy.ionBackClick('navigation');
@ -25,7 +33,11 @@ describe('Lifecycle', () => {
ionViewWillEnter: 2,
ionViewDidEnter: 2,
ionViewWillLeave: 1,
ionViewDidLeave: 1
ionViewDidLeave: 1,
onIonViewWillEnter: 2,
onIonViewDidEnter: 2,
onIonViewWillLeave: 1,
onIonViewDidLeave: 1
});
});
@ -36,7 +48,11 @@ describe('Lifecycle', () => {
ionViewWillEnter: 1,
ionViewDidEnter: 1,
ionViewWillLeave: 0,
ionViewDidLeave: 0
ionViewDidLeave: 0,
onIonViewWillEnter: 1,
onIonViewDidEnter: 1,
onIonViewWillLeave: 0,
onIonViewDidLeave: 0
});
});
})
@ -46,4 +62,9 @@ const testLifecycle = (selector, expected = {}) => {
cy.get(`[data-pageid=${selector}] #didEnter`).should('have.text', expected.ionViewDidEnter);
cy.get(`[data-pageid=${selector}] #willLeave`).should('have.text', expected.ionViewWillLeave);
cy.get(`[data-pageid=${selector}] #didLeave`).should('have.text', expected.ionViewDidLeave);
cy.get(`[data-pageid=${selector}] #onWillEnter`).should('have.text', expected.onIonViewWillEnter);
cy.get(`[data-pageid=${selector}] #onDidEnter`).should('have.text', expected.onIonViewDidEnter);
cy.get(`[data-pageid=${selector}] #onWillLeave`).should('have.text', expected.onIonViewWillLeave);
cy.get(`[data-pageid=${selector}] #onDidLeave`).should('have.text', expected.onIonViewDidLeave);
}