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

pages/lifecycle/page/page-composition.uvue

 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1" :bounces="false">
-  <!-- #endif -->
+    <!-- #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 -->
+    <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
 <script setup lang="uts">
-  import { state, setLifeCycleNum } from '@/store/index.uts'
-  type DataInfo = {
-    isScrolled : boolean
-  }
-  const dataInfo = reactive({
-    isScrolled: false,
-  } as DataInfo)
+import { state, setLifeCycleNum } from '@/store/index.uts'
 
-  onLoad((_ : OnLoadOptions) => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 100)
-  })
-  onPageShow(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onReady(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onPullDownRefresh(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onPageScroll((_) => {
-    // 自动化测试
-    dataInfo.isScrolled = true
-  })
-  onReachBottom(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
-  onBackPress((_ : OnBackPressOptions) : boolean | null => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 10)
-    return null
-  })
-  onPageHide(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 10)
-  })
-  onUnload(() => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 100)
-  })
-  onResize((_) => {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 10)
-  })
+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({
+  isScrolled: false,
+} as DataInfo)
+
+onLoad((options : OnLoadOptions) => {
+  console.log('onLoad', options)
+  isOnloadTriggered.value = true
   // 自动化测试
-  const pageGetLifeCycleNum = () : number => {
-    return state.lifeCycleNum
-  }
+  setLifeCycleNum(state.lifeCycleNum + 100)
+})
+onPageShow(() => {
+  isOnPageShowTriggered.value = true
   // 自动化测试
-  const pageSetLifeCycleNum = (num : number) => {
-    setLifeCycleNum(num)
-  }
-
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
+onReady(() => {
+  isOnReadyTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
+onPullDownRefresh(() => {
+  isOnPullDownRefreshTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
+onPageScroll((e: OnPageScrollOptions) => {
+  console.log('onPageScroll', e)
+  isOnPageScrollTriggered.value = true
+  // 自动化测试
+  dataInfo.isScrolled = true
+})
+onReachBottom(() => {
+  isOnReachBottomTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
+onBackPress((options : OnBackPressOptions) : boolean | null => {
+  console.log('onBackPress', options)
+  isOnBackPressTriggered.value = true
   // 自动化测试
-  const pullDownRefresh = () => {
-    uni.startPullDownRefresh({
-      success() {
-        setTimeout(() => {
-          uni.stopPullDownRefresh()
-        }, 1500)
-      },
-    })
-  }
+  setLifeCycleNum(state.lifeCycleNum - 10)
+  return null
+})
+onPageHide(() => {
+  isOnPageHideTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum - 10)
+})
+onUnload(() => {
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum - 100)
+})
+onResize((options: OnResizeOptions) => {
+  console.log('onBackPress', options)
+  isOnResizeTriggered.value = true
+  // 自动化测试
+  setLifeCycleNum(state.lifeCycleNum + 10)
+})
 
-  const scrollToBottom = () => {
-    uni.pageScrollTo({
-      scrollTop: 2000,
-    })
-  }
+// 自动化测试
+const pageGetLifeCycleNum = () : number => {
+  return state.lifeCycleNum
+}
+// 自动化测试
+const pageSetLifeCycleNum = (num : number) => {
+  setLifeCycleNum(num)
+}
 
-  defineExpose({
-    dataInfo,
-    pageGetLifeCycleNum,
-    pageSetLifeCycleNum,
-    pullDownRefresh,
-    scrollToBottom,
+// 自动化测试
+const pullDownRefresh = () => {
+  uni.startPullDownRefresh({
+    success() {
+      setTimeout(() => {
+        uni.stopPullDownRefresh()
+      }, 1500)
+    },
   })
+}
+
+const scrollToBottom = () => {
+  uni.pageScrollTo({
+    scrollTop: 2000,
+  })
+}
+
+defineExpose({
+  dataInfo,
+  pageGetLifeCycleNum,
+  pageSetLifeCycleNum,
+  pullDownRefresh,
+  scrollToBottom,
+})
 </script>
 
 <style>
-  .container {
-    height: 1200px;
-  }
-</style>
\ No newline at end of file
+.container {
+  height: 1200px;
+}
+</style>

pages/lifecycle/page/page-options.uvue

 <template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex: 1" :bounces="false">
-	<!-- #endif -->
-		<view class="page container">
-			<text>page lifecycle 选项式 API</text>
-			<button class="mt-10" @click="scrollToBottom">scrollToBottom</button>
-		</view>
-	<!-- #ifdef APP -->
-	</scroll-view>
-	<!-- #endif -->
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1" :bounces="false">
+    <!-- #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>
+  <!-- #endif -->
 </template>
 
 <script lang="uts">
-	import { state, setLifeCycleNum } from '@/store/index.uts'
-  type DataInfo = {
-  	isScrolled: boolean
-  }
-	export default {
-		data() {
-			return {
-				dataInfo: {
-          isScrolled: false,
-        } as DataInfo
-			}
+import { state, setLifeCycleNum } from '@/store/index.uts'
+ type DataInfo = {
+ 	isScrolled: boolean
+ }
+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(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(e: OnPageScrollOptions) {
+		console.log('onPageScroll', e)
+  	this.isOnPageScrollTriggered = true
+		// 自动化测试
+		this.dataInfo.isScrolled = true
+	},
+	onReachBottom() {
+		this.isOnReachBottomTriggered = true
+		// 自动化测试
+		setLifeCycleNum(state.lifeCycleNum + 10)
+	},
+	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)
+	},
+	onUnload() {
+		// 自动化测试
+		setLifeCycleNum(state.lifeCycleNum - 100)
+	},
+	onResize(options: OnResizeOptions) {
+		console.log('onBackPress', options)
+		this.isOnResizeTriggered = true
+		// 自动化测试
+		setLifeCycleNum(state.lifeCycleNum + 10)
+	},
+	methods: {
+		// 自动化测试
+		pageGetLifeCycleNum() : number {
+			return state.lifeCycleNum
 		},
-		onLoad(_ : OnLoadOptions) {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum + 100)
+		// 自动化测试
+		pageSetLifeCycleNum(num : number) {
+			setLifeCycleNum(num)
 		},
-		onShow() {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum + 10)
+		// 自动化测试
+		pullDownRefresh() {
+			uni.startPullDownRefresh({
+				success() {
+					setTimeout(() => {
+						uni.stopPullDownRefresh()
+						// 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒
+					}, 1500)
+				},
+			})
 		},
-		onReady() {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum + 10)
+		scrollToBottom() {
+			uni.pageScrollTo({
+				scrollTop: 2000,
+			})
 		},
-		onPullDownRefresh() {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum + 10)
-		},
-		onPageScroll(_) {
-			// 自动化测试
-			this.dataInfo.isScrolled = true
-		},
-		onReachBottom() {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum + 10)
-		},
-		onBackPress(_ : OnBackPressOptions) : boolean | null {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum - 10)
-			return null
-		},
-		onHide() {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum - 10)
-		},
-		onUnload() {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum - 100)
-		},
-		onResize(_) {
-			// 自动化测试
-			setLifeCycleNum(state.lifeCycleNum + 10)
-		},
-		methods: {
-			// 自动化测试
-			pageGetLifeCycleNum() : number {
-				return state.lifeCycleNum
-			},
-			// 自动化测试
-			pageSetLifeCycleNum(num : number) {
-				setLifeCycleNum(num)
-			},
-			// 自动化测试
-			pullDownRefresh() {
-				uni.startPullDownRefresh({
-					success() {
-						setTimeout(() => {
-							uni.stopPullDownRefresh()
-							// 一秒后立即停止下拉刷新不会触发 onPullDownRefresh，因为下拉动画时间大概需要1.1～1.2秒
-						}, 1500)
-					},
-				})
-			},
-			scrollToBottom() {
-				uni.pageScrollTo({
-					scrollTop: 2000,
-				})
-			},
-		},
-	}
+	},
+}
 </script>
 
 <style>
-	.container {
-		height: 1200px;
-	}
-</style>
\ No newline at end of file
+.container {
+  height: 1200px;
+}
+</style>