feat: 组件生命周期示例及测试

components/Lifecycle.uvue → components/CompositionAPILifecycle.uvue

 <template>
   title: {{ title }}
-	<button class="component-lifecycle-btn" @click="updateTitle">updateTitle</button>
+  <button class="component-lifecycle-btn uni-common-mt" @click="updateTitle">
+    updateTitle
+  </button>
 </template>
 
-<script>
-import { state, setLifeCycleNum } from '../store/index.uts'
-export default {
-  name: 'ComponentLifecycle',
-  data() {
-    return {
-      title: 'component for lifecycle test',
-    }
-  },
-  beforeCreate() {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 1)
-    console.log('component for lifecycle test beforeCreate')
-  },
-  created() {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 1)
-    console.log('component for lifecycle test created')
-  },
-  beforeMount() {
+<script setup>
+  import { state, setLifeCycleNum } from '../store/index.uts'
+
+  const title = ref('component for composition API lifecycle test')
+
+  onBeforeMount(() => {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 1)
-    console.log('component for lifecycle test beforeMount')
-  },
-  mounted() {
+    console.log('component for lifecycle test mounted')
+  })
+
+  onMounted(() => {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 1)
     console.log('component for lifecycle test mounted')
-  },
-  beforeUpdate() {
+  })
+
+  onBeforeUpdate(() => {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 1)
     console.log('component for lifecycle test beforeUpdate')
-  },
-  updated() {
+  })
+
+  onUpdated(() => {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum + 1)
     console.log('component for lifecycle test updated')
-  },
-  beforeUnmount() {
+  })
+
+  onBeforeUnmount(() => {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 1)
     console.log('component for lifecycle test beforeUnmount')
-  },
-  unmounted() {
+  })
+
+  onUnmounted(() => {
     // 自动化测试
     setLifeCycleNum(state.lifeCycleNum - 1)
     console.log('component for lifecycle test unmounted')
-  },
-  methods: {
-		updateTitle(){
-			this.title = 'component for lifecycle test updated'
-		}
-  },
-}
-</script>
+  })
+
+  // 测试无法触发
+  onActivated(() => { })
+  // 测试无法触发
+  onDeactivated(() => { })
+
+  const updateTitle = () => {
+    title.value = 'component for lifecycle test updated'
+  }
+</script>
\ No newline at end of file

components/OptionsAPILifecycle.uvue

+<template>
+  title: {{ title }}
+  <button class="component-lifecycle-btn uni-common-mt" @click="updateTitle">
+    updateTitle
+  </button>
+</template>
+
+<script>
+  import { state, setLifeCycleNum } from '../store/index.uts';
+  export default {
+    name: 'OptionsAPIComponentLifecycle',
+    data() {
+      return {
+        title: 'component for options API lifecycle test',
+      };
+    },
+    beforeCreate() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum + 1);
+      console.log('component for lifecycle test beforeCreate');
+    },
+    created() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum + 1);
+      console.log('component for lifecycle test created');
+    },
+    beforeMount() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum + 1);
+      console.log('component for lifecycle test beforeMount');
+    },
+    mounted() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum + 1);
+      console.log('component for lifecycle test mounted');
+    },
+    beforeUpdate() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum + 1);
+      console.log('component for lifecycle test beforeUpdate');
+    },
+    updated() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum + 1);
+      console.log('component for lifecycle test updated');
+    },
+    beforeUnmount() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum - 1);
+      console.log('component for lifecycle test beforeUnmount');
+    },
+    unmounted() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum - 1);
+      console.log('component for lifecycle test unmounted');
+    },
+    methods: {
+      updateTitle() {
+        this.title = 'component for lifecycle test updated';
+      },
+    },
+  };
+</script>
\ No newline at end of file

pages.json

@@ -594,6 +594,13 @@
         "navigationBarTitleText" : "页面生命周期",
         "enablePullDownRefresh": true
       }
+    },
+    {
+      "path" : "pages/composition-api/lifecycle/component-lifecycle/component-lifecycle",
+      "style" : 
+      {
+        "navigationBarTitleText" : "组件生命周期"
+      }
     }
   ],
   "tabBar": {

pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.test.js

+const PAGE_PATH = '/pages/composition-api/lifecycle/component-lifecycle/component-lifecycle'
+const HOME_PATH = '/pages/tab-bar/options-api'
+
+describe('component-lifecycle', () => {
+	let page
+	let lifeCycleNum
+	beforeAll(async () => {
+		page = await program.reLaunch(HOME_PATH)
+		await page.waitFor(700)
+		const initLifecycleNum = 0
+		await page.callMethod('setLifeCycleNum', initLifecycleNum)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(initLifecycleNum)
+
+		page = await program.navigateTo(PAGE_PATH)
+		await page.waitFor(700)
+	})
+	afterAll(async () => {
+		const resetLifecycleNum = 1100
+		await page.callMethod('setLifeCycleNum', resetLifecycleNum)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(resetLifecycleNum)
+	})
+
+	it('onBeforeMount onMounted', async () => {
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(2)
+	})
+	it('onBeforeUpdate onUpdated', async () => {
+		const updateTitleBtn = await page.$('.component-lifecycle-btn')
+		await updateTitleBtn.tap()
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(4)
+	})
+	it('beforeUnmount unmounted', async () => {
+		page = await program.navigateBack()
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(2)
+	})
+})
\ No newline at end of file

pages/composition-api/lifecycle/component-lifecycle/component-lifecycle.uvue

+<template>
+  <view class="page">
+    <text class="uni-common-mb">component lifecycle</text>
+    <component-lifecycle class="component-lifecycle" />
+  </view>
+</template>
+
+<script setup>
+  import ComponentLifecycle from '@/components/CompositionApiLifecycle.uvue'
+  import { state } from '@/store/index.uts'
+
+  // 自动化测试
+  const getLifeCycleNum = () : number => {
+    return state.lifeCycleNum
+  }
+
+  defineExpose({
+    getLifeCycleNum
+  })
+</script>
\ No newline at end of file

pages/lifecycle/component/component.uvue

 <template>
   <view class="page">
-    <text>component lifecycle</text>
+    <text class="uni-common-mb">component lifecycle</text>
     <component-lifecycle class="component-lifecycle" />
   </view>
 </template>
 
 <script>
-import ComponentLifecycle from '@/components/Lifecycle.uvue'
+import ComponentLifecycle from '@/components/OptionsAPILifecycle.uvue'
 import { state } from '@/store/index.uts'
 export default {
   components: { ComponentLifecycle },

pages/tab-bar/composition-api.uvue

@@ -324,10 +324,15 @@
       name: '生命周期',
       open: false,
       pages: [
-        {
-          name: '页面生命周期',
-          url: 'page-lifecycle',
-          enable: true,
+        {
+          name: '页面生命周期',
+          url: 'page-lifecycle',
+          enable: true,
+        },
+        {
+          name: '组件生命周期',
+          url: 'component-lifecycle',
+          enable: true,
         },
       ]
     }