chore(): sync vue tabs changes with master

packages/vue/test-app/src/router/index.ts

@@ -105,6 +105,10 @@ const routes: Array<RouteRecordRaw> = [
           next({ path: '/tabs/tab1' });
         },
         component: () => import('@/views/Tab3.vue')
+      },
+      {
+        path: 'tab4',
+        component: () => import('@/views/Tab4.vue')
       }
     ]
   },

packages/vue/test-app/src/views/Lifecycle.vue

@@ -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,

packages/vue/test-app/src/views/Tab4.vue

@@ -0,0 +1,27 @@
+<template>
+  <ion-page data-pageid="tab4">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Tab 4</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Tab 4</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ExploreContainer name="Tab 4 page" />
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+import ExploreContainer from '@/components/ExploreContainer.vue';
+
+export default  {
+  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
+}
+</script>