perf(lifecycle): 优化生命周期示例

pages/lifecycle/page/page-composition.uvue

@@ -4,8 +4,41 @@
     <!-- #endif -->
     <view class="page container">
       <text>page lifecycle 组合式 API</text>
-      <button class="mt-10" @click="scrollToBottom">
-        scrollToBottom
+      <view class="flex flex-row justify-between mt-10">
+        <text>onLoad 触发：</text>
+        <text>{{ isOnloadTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPageShow 触发：</text>
+        <text>{{ isOnPageShowTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onReady 触发：</text>
+        <text>{{ isOnReadyTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPullDownRefresh 触发：</text>
+        <text>{{ isOnPullDownRefreshTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onReachBottom 触发：</text>
+        <text>{{ isOnReachBottomTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onBackPress 触发：</text>
+        <text>{{ isOnBackPressTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPageHide 触发：</text>
+        <text>{{ isOnPageHideTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onResize 触发：</text>
+        <text>{{ isOnResizeTriggered }}</text>
+      </view>
+      <button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
+      <button class="mt-10" @click="pullDownRefresh">
+        trigger pullDownRefresh
       </button>
     </view>
     <!-- #ifdef APP -->
@@ -14,67 +47,91 @@
 </template>
 
 <script setup lang="uts">
-  import { state, setLifeCycleNum } from '@/store/index.uts'
-  type DataInfo = {
+import { state, setLifeCycleNum } from '@/store/index.uts'
+
+const isOnloadTriggered = ref(false)
+const isOnPageShowTriggered = ref(false)
+const isOnReadyTriggered = ref(false)
+const isOnPullDownRefreshTriggered = ref(false)
+const isOnPageScrollTriggered = ref(false)
+const isOnReachBottomTriggered = ref(false)
+const isOnBackPressTriggered = ref(false)
+const isOnPageHideTriggered = ref(false)
+const isOnResizeTriggered = ref(false)
+
+type DataInfo = {
   isScrolled : boolean
-  }
-  const dataInfo = reactive({
+}
+const dataInfo = reactive({
   isScrolled: false,
-  } as DataInfo)
+} as DataInfo)
 
-  onLoad((_ : OnLoadOptions) => {
+onLoad((options : OnLoadOptions) => {
+  console.log('onLoad', options)
+  isOnloadTriggered.value = true
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum + 100)
-  })
-  onPageShow(() => {
+})
+onPageShow(() => {
+  isOnPageShowTriggered.value = true
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onReady(() => {
+})
+onReady(() => {
+  isOnReadyTriggered.value = true
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onPullDownRefresh(() => {
+})
+onPullDownRefresh(() => {
+  isOnPullDownRefreshTriggered.value = true
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onPageScroll((_) => {
+})
+onPageScroll((e: OnPageScrollOptions) => {
+  console.log('onPageScroll', e)
+  isOnPageScrollTriggered.value = true
   // 自动化测试
   dataInfo.isScrolled = true
-  })
-  onReachBottom(() => {
+})
+onReachBottom(() => {
+  isOnReachBottomTriggered.value = true
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onBackPress((_ : OnBackPressOptions) : boolean | null => {
+})
+onBackPress((options : OnBackPressOptions) : boolean | null => {
+  console.log('onBackPress', options)
+  isOnBackPressTriggered.value = true
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum - 10)
   return null
-  })
-  onPageHide(() => {
+})
+onPageHide(() => {
+  isOnPageHideTriggered.value = true
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum - 10)
-  })
-  onUnload(() => {
+})
+onUnload(() => {
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum - 100)
-  })
-  onResize((_) => {
+})
+onResize((options: OnResizeOptions) => {
+  console.log('onBackPress', options)
+  isOnResizeTriggered.value = true
   // 自动化测试
   setLifeCycleNum(state.lifeCycleNum + 10)
-  })
+})
 
-  // 自动化测试
-  const pageGetLifeCycleNum = () : number => {
+// 自动化测试
+const pageGetLifeCycleNum = () : number => {
   return state.lifeCycleNum
-  }
-  // 自动化测试
-  const pageSetLifeCycleNum = (num : number) => {
+}
+// 自动化测试
+const pageSetLifeCycleNum = (num : number) => {
   setLifeCycleNum(num)
-  }
+}
 
-  // 自动化测试
-  const pullDownRefresh = () => {
+// 自动化测试
+const pullDownRefresh = () => {
   uni.startPullDownRefresh({
     success() {
       setTimeout(() => {
@@ -82,25 +139,25 @@
       }, 1500)
     },
   })
-  }
+}
 
-  const scrollToBottom = () => {
+const scrollToBottom = () => {
   uni.pageScrollTo({
     scrollTop: 2000,
   })
-  }
+}
 
-  defineExpose({
+defineExpose({
   dataInfo,
   pageGetLifeCycleNum,
   pageSetLifeCycleNum,
   pullDownRefresh,
   scrollToBottom,
-  })
+})
 </script>
 
 <style>
-  .container {
+.container {
   height: 1200px;
-  }
+}
 </style>

pages/lifecycle/page/page-options.uvue

@@ -4,7 +4,42 @@
     <!-- #endif -->
     <view class="page container">
       <text>page lifecycle 选项式 API</text>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onLoad 触发：</text>
+        <text>{{ isOnloadTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onShow 触发：</text>
+        <text>{{ isOnShowTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onReady 触发：</text>
+        <text>{{ isOnReadyTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onPullDownRefresh 触发：</text>
+        <text>{{ isOnPullDownRefreshTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onReachBottom 触发：</text>
+        <text>{{ isOnReachBottomTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onBackPress 触发：</text>
+        <text>{{ isOnBackPressTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onHide 触发：</text>
+        <text>{{ isOnHideTriggered }}</text>
+      </view>
+      <view class="flex flex-row justify-between mt-10">
+        <text>onResize 触发：</text>
+        <text>{{ isOnResizeTriggered }}</text>
+      </view>
       <button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
+      <button class="mt-10" @click="pullDownRefresh">
+        trigger pullDownRefresh
+      </button>
     </view>
     <!-- #ifdef APP -->
   </scroll-view>
@@ -12,48 +47,68 @@
 </template>
 
 <script lang="uts">
-	import { state, setLifeCycleNum } from '@/store/index.uts'
+import { state, setLifeCycleNum } from '@/store/index.uts'
  type DataInfo = {
  	isScrolled: boolean
  }
-	export default {
+export default {
 	data() {
 		return {
+			isOnloadTriggered: false,
+			isOnShowTriggered: false,
+			isOnReadyTriggered: false,
+			isOnPullDownRefreshTriggered: false,
+			isOnPageScrollTriggered: false,
+			isOnReachBottomTriggered: false,
+			isOnBackPressTriggered: false,
+			isOnHideTriggered: false,
+			isOnResizeTriggered: false,
 			dataInfo: {
          isScrolled: false,
        } as DataInfo
 		}
 	},
-		onLoad(_ : OnLoadOptions) {
+	onLoad(options : OnLoadOptions) {
+		console.log('onLoad', options)
+		this.isOnloadTriggered = true
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum + 100)
 	},
 	onShow() {
+		this.isOnShowTriggered = true
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum + 10)
 	},
 	onReady() {
+		this.isOnReadyTriggered = true
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum + 10)
 	},
 	onPullDownRefresh() {
+		this.isOnPullDownRefreshTriggered = true
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum + 10)
 	},
-		onPageScroll(_) {
+	onPageScroll(e: OnPageScrollOptions) {
+		console.log('onPageScroll', e)
+  	this.isOnPageScrollTriggered = true
 		// 自动化测试
 		this.dataInfo.isScrolled = true
 	},
 	onReachBottom() {
+		this.isOnReachBottomTriggered = true
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum + 10)
 	},
-		onBackPress(_ : OnBackPressOptions) : boolean | null {
+	onBackPress(options : OnBackPressOptions) : boolean | null {
+		console.log('onBackPress', options)
+		this.isOnBackPressTriggered = true
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum - 10)
 		return null
 	},
 	onHide() {
+		this.isOnHideTriggered = true
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum - 10)
 	},
@@ -61,7 +116,9 @@
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum - 100)
 	},
-		onResize(_) {
+	onResize(options: OnResizeOptions) {
+		console.log('onBackPress', options)
+		this.isOnResizeTriggered = true
 		// 自动化测试
 		setLifeCycleNum(state.lifeCycleNum + 10)
 	},
@@ -91,11 +148,11 @@
 			})
 		},
 	},
-	}
+}
 </script>
 
 <style>
-	.container {
+.container {
   height: 1200px;
-	}
+}
 </style>