feat: lifecycle

components/Lifecycle.uvue

+<template>
+	<view>
+		<text>{{title}}</text>
+	</view>
+</template>
+
+<script lang="ts">
+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() {
+		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: {
+		getLifeCycleNum(): number {
+			return state.lifeCycleNum
+		}
+	},
+}
+</script>

pages.json

@@ -52,12 +52,19 @@
       "style": {
         "navigationBarTitleText": "v-slot"
       }
-    },{
+    },
+    {
       "path": "pages/page-lifecycle/page-lifecycle",
       "style": {
         "navigationBarTitleText": "page-lifecycle"
       }
     },
+    {
+      "path": "pages/component-lifecycle/component-lifecycle",
+      "style": {
+        "navigationBarTitleText": "component-lifecycle"
+      }
+    },
     {
       "path": "pages/component-instance/data/data",
       "style": {

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

+const PAGE_PATH = '/pages/component-lifecycle/component-lifecycle'
+const HOME_PATH = '/pages/index'
+
+describe('component-lifecycle', () => {
+  let page
+	let lifeCycleNum
+  beforeAll(async () => {
+		page = await program.reLaunch(HOME_PATH)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1100)
+    
+		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(1000)
+  })
+  it('beforeCreate created beforeMount mounted', async () => {
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(4)
+  })
+  it('beforeUpdate updated', async () => {
+		const component = await page.$('.component-lifecycle')
+		await component.setData({
+			title: 'component for lifecycle test new title'
+		})
+    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)
+    
+		const resetLifecycleNum = 1100
+		await page.callMethod('setLifeCycleNum', resetLifecycleNum)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(resetLifecycleNum)
+  })
+})

pages/component-lifecycle/component-lifecycle.uvue

+<template>
+	<view class="page">
+		<text>component lifecycle</text>
+		<component-lifecycle class="component-lifecycle" />
+	</view>
+</template>
+
+<script lang="ts">
+import ComponentLifecycle from '../../components/Lifecycle.uvue'
+import { state } from '../../store/index.uts'
+export default {
+	components: { ComponentLifecycle },
+	methods: {
+		getLifeCycleNum(): number {
+			return state.lifeCycleNum
+		}
+	},
+}
+</script>

pages/index.uvue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-  import { state } from '../store/index.uts'
+  import { setLifeCycleNum, state } from '../store/index.uts'
   const STORAGE_KEY_PREFIX = 'INDEX-STATUS'
   let storageData : Array<string> = []
 
@@ -51,7 +51,8 @@
             name: '生命周期',
             open: false,
             pages: [
-              'page-lifecycle'
+              'page-lifecycle',
+              'component-lifecycle'
             ].map(createPageItem())
           },
           {
@@ -165,6 +166,10 @@
           url: e.path
         })
       },
+			setLifeCycleNum(num: number){
+				console.warn('index setLifeCycleNum', num)
+				setLifeCycleNum(num)
+			},
       getLifeCycleNum(): number {
         return state.lifeCycleNum
       },

pages/page-lifecycle/page-lifecycle.test.js

@@ -5,37 +5,51 @@ describe('page-lifecycle', () => {
   let page
 	let lifeCycleNum
   beforeAll(async () => {
-    page = await program.reLaunch(PAGE_PATH)
+    page = await program.reLaunch(HOME_PATH)
+    lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(1100)
+
+		const initLifecycleNum = 0
+		await page.callMethod('setLifeCycleNum', initLifecycleNum)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+    expect(lifeCycleNum).toBe(initLifecycleNum)
+    
+		page = await program.reLaunch(PAGE_PATH)
     await page.waitFor(1000)
   })
   it('onLoad onShow onReady', async () => {
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(1220)
+    expect(lifeCycleNum).toBe(120)
   })
   it('onHide', async () => {
     page = await program.navigateTo(HOME_PATH)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(1210)
+    expect(lifeCycleNum).toBe(110)
 		page = await program.navigateBack()
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(1220)
+    expect(lifeCycleNum).toBe(120)
   })
   it('onUnload', async () => {
     page = await program.redirectTo(HOME_PATH)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(1120)
+    expect(lifeCycleNum).toBe(20)
   })
   it('onBackPress', async () => {
     page = await program.navigateTo(PAGE_PATH)
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(1240)
+    expect(lifeCycleNum).toBe(140)
     page = await program.navigateBack()
     lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(1130)
+    expect(lifeCycleNum).toBe(30)
   })
 	it('onLastPageBackPress', async () => {
 	  page = await program.navigateBack()
 	  lifeCycleNum = await page.callMethod('getLifeCycleNum')
-	  expect(lifeCycleNum).toBe(130)
+    expect(lifeCycleNum).toBe(-970)
+    
+		const resetLifecycleNum = 1100
+		await page.callMethod('setLifeCycleNum', resetLifecycleNum)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(resetLifecycleNum)
 	})
-})
\ No newline at end of file
+})