feat: 组件生命周期补充 activated deactivated 示例及测试

pages/lifecycle/component/ChildComponentComposition.uvue

@@ -57,7 +57,7 @@ onUnload(() => {
 onBeforeMount(() => {
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum + 1)
-  console.log('component for lifecycle test mounted')
+  console.log('component for lifecycle test onBeforeMount')
 })
 
 onMounted(() => {
@@ -90,10 +90,16 @@ onUnmounted(() => {
   console.log('component for lifecycle test unmounted')
 })
 
-// TODO: app-android 不触发
-onActivated(() => { })
-// TODO: app-android 不触发
-onDeactivated(() => { })
+onActivated(() => {
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 1)
+  console.log('component for lifecycle test onActivated')
+})
+onDeactivated(() => {
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum - 1)
+  console.log('component for lifecycle test onDeactivated')
+})
 
 const updateTitle = () => {
   title.value = 'component for lifecycle test updated'

pages/lifecycle/component/ChildComponentOptions.uvue

@@ -54,6 +54,16 @@
       setLifeCycleNum(state.lifeCycleNum - 1);
       console.log('component for lifecycle test unmounted');
     },
+    activated() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum + 1);
+      console.log('component for lifecycle test activated');
+    },
+    deactivated() {
+      // 自动化测试
+      setLifeCycleNum(state.lifeCycleNum - 1);
+      console.log('component for lifecycle test deactivated');
+    },
     methods: {
       updateTitle() {
         this.title = 'component for lifecycle test updated';

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

@@ -4,6 +4,9 @@ const HOME_PATH = '/pages/index/index'
 describe('component-lifecycle', () => {
   let page
   let lifeCycleNum
+  const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+  const isAndroid = platformInfo.includes('android')
+  const isIos = platformInfo.includes('ios')
   beforeAll(async () => {
     page = await program.reLaunch(HOME_PATH)
     await page.waitFor(700)
@@ -22,9 +25,23 @@ describe('component-lifecycle', () => {
     expect(lifeCycleNum).toBe(resetLifecycleNum)
   })
 
-  it('onLoad onPageShow onReady onBeforeMount onMounted', async () => {
+  it('onLoad onPageShow onReady onBeforeMount onMounted onActivated', async () => {
+    lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
+    // TODO: android 组合式 API 不触发 onActivated
+    expect(lifeCycleNum).toBe(isAndroid ? 112 : 113)
+  })
+  it('onDeactivated', async () => {
+    // TODO: android 组合式 API 不触发 onActivated onDeactivated
+    const toggleAliveComponentBtn = await page.$('#toggle-alive-component-btn')
+
+    await toggleAliveComponentBtn.tap()
     lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
     expect(lifeCycleNum).toBe(112)
+
+    await toggleAliveComponentBtn.tap()
+    lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
+    // TODO: android 端 keep-alive 组件切换时，不触发 activated, 会触发 beforeUpdate updated
+    expect(lifeCycleNum).toBe(isAndroid ? 114 : 113)
     await page.callMethod('pageSetLifeCycleNum', 0)
   })
   it('onBeforeUpdate onUpdated', async () => {
@@ -56,17 +73,19 @@ describe('component-lifecycle', () => {
     page = await program.navigateTo(HOME_PATH)
     await page.waitFor('view')
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(-10)
+    // TODO: ios 跳转页面, 未触发 keep-alive 组件 onDeactivated,返回未触发 onActivated
+    // TODO: android 跳转页面, 未触发 keep-alive 组件 onDeactivated,返回未触发 onActivated
+    expect(lifeCycleNum).toBe(isIos || isAndroid ? -10 : -11)
     page = await program.navigateBack()
     await page.waitFor('view')
     lifeCycleNum = await page.callMethod('pageGetLifeCycleNum')
     expect(lifeCycleNum).toBe(0)
-    await page.callMethod('pageSetLifeCycleNum', 0)
   })
-  it('beforeUnmount unmounted onUnload onBackPress', async () => {
+  it('onDeactivated beforeUnmount unmounted onUnload onBackPress', async () => {
     page = await program.navigateBack()
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(-112)
+    // TODO: android 组合式 API 不触发 onDeactivated
+    expect(lifeCycleNum).toBe(isAndroid ? -112 : -113)
     await page.callMethod('setLifeCycleNum', 0)
   })
 })
\ No newline at end of file

pages/lifecycle/component/component-composition.uvue

@@ -4,8 +4,11 @@
   <!-- #endif -->
     <view class="page container">
       <text class="mb-10">component lifecycle 组合式 API</text>
-      <child-component @updateIsScroll="updateIsScroll" />
+      <keep-alive>
+        <component :is="aliveComponent"  @updateIsScroll="updateIsScroll" />
+      </keep-alive>
       <button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
+      <button id="toggle-alive-component-btn" class="mt-10" @click="toggleAliveComponent">toggle alive component</button>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
@@ -16,6 +19,8 @@
   import ChildComponent from './ChildComponentComposition.uvue'
   import { state, setLifeCycleNum } from '@/store/index.uts'
 
+  const aliveComponent = shallowRef<any | null>(ChildComponent)
+
   const isScrolled = ref(false)
 
   // 自动化测试
@@ -24,7 +29,7 @@
   }
 
   // 自动化测试
-  const pageSetLifeCycleNum = (num : number) => {
+  const pageSetLifeCycleNum = (num : number) => {
     setLifeCycleNum(num)
   }
 
@@ -44,6 +49,10 @@
       scrollTop: 3000,
     })
   }
+  
+  const toggleAliveComponent = () => {
+    aliveComponent.value = aliveComponent.value == null ? ChildComponent : null
+  }
 
   const updateIsScroll = (val : boolean) => {
     isScrolled.value = val

pages/lifecycle/component/component-options.test.js

@@ -2,39 +2,51 @@ const PAGE_PATH = '/pages/lifecycle/component/component-options'
 const HOME_PATH = '/pages/index/index'
 
 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)
+  let page
+  let lifeCycleNum
+  const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+  const isAndroid = platformInfo.includes('android')
+  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)
-	})
+    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('beforeCreate created beforeMount mounted', async () => {
-		lifeCycleNum = await page.callMethod('getLifeCycleNum')
-		expect(lifeCycleNum).toBe(4)
-	})
-	it('beforeUpdate updated', async () => {
-		const updateTitleBtn = await page.$('.component-lifecycle-btn')
-		await updateTitleBtn.tap()
-		lifeCycleNum = await page.callMethod('getLifeCycleNum')
-		expect(lifeCycleNum).toBe(6)
-	})
-	it('beforeUnmount unmounted', async () => {
-		page = await program.navigateBack()
-		lifeCycleNum = await page.callMethod('getLifeCycleNum')
-		expect(lifeCycleNum).toBe(4)
-	})
+  it('beforeCreate created beforeMount mounted activated', async () => {
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(5)
+  })
+  it('deactivated', async () => {
+    const toggleAliveComponentBtn = await page.$('#toggle-alive-component-btn')
+    await toggleAliveComponentBtn.tap()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(4)
+    // TODO: android 端 keep-alive 组件切换时，不仅触发 activated, 之前还会触发 beforeUpdate updated
+    await toggleAliveComponentBtn.tap()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(isAndroid ? 7 : 5)
+  })
+  it('beforeUpdate updated', async () => {
+    const updateTitleBtn = await page.$('.component-lifecycle-btn')
+    await updateTitleBtn.tap()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(isAndroid ? 9 : 7)
+  })
+  it('deactivated beforeUnmount unmounted', async () => {
+    page = await program.navigateBack()
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(isAndroid ? 6 : 4)
+  })
 })
\ No newline at end of file

pages/lifecycle/component/component-options.uvue

 <template>
   <view class="page">
     <text class="mb-10">component lifecycle 选项式 API</text>
-    <child-component />
+    <keep-alive>
+      <component :is="aliveComponent" />
+    </keep-alive>
+    <button id="toggle-alive-component-btn" class="mt-10" @click="toggleAliveComponent">toggle alive component</button>
   </view>
 </template>
 
@@ -11,11 +14,19 @@ import { state } from '@/store/index.uts'
 
 export default {
   components: { ChildComponent },
+  data(){
+    return {
+      aliveComponent: ChildComponent as any | null,
+    }
+  },
   methods: {
     // 自动化测试
     getLifeCycleNum(): number {
       return state.lifeCycleNum
     },
+    toggleAliveComponent(){
+      this.aliveComponent = this.aliveComponent == null ? ChildComponent : null
+    }
   },
 }
 </script>