常见页面生命周期函数

onLoad(options): 页面加载时触发，可以接收启动页面时的参数

onShow: 

onReady: 页面初次渲染完成时触发。

onHide: 页面被隐藏时触发

onUnload: 页面被关闭时触发

onLoad作用

 获取url传递的参数,可以使用onLoad来获取,具体实现可以查看

如何获取以下url传递的参数?

可以通过onLoad()来获取.onLoad有一个形参,用于接收初始化的参数

	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad((e) => {
		console.log(e);
	})

onShow作用

onShow 会在以下几种情况下被调用：

1. 页面首次加载时：当用户首次打开页面时，onShow 会被触发。
2. 页面从后台回到前台时：如果用户切换到其他页面或应用，然后再次回到当前页面，onShow 也会被触发。
3. 从其他页面返回当前页面时：当用户从一个导航栈中的其他页面返回到当前页面时，onShow 会被触发。

---

与 onLoad 的区别

1. 触发时机：onLoad 只在页面首次加载时触发一次，而 onShow 每次页面显示时都会触发。

2. 用途：onLoad 更适合用于初始化页面数据和执行一次性操作，而 onShow 则适合用于更新页面数据和执行周期性操作。

onReady 的作用：

1. DOM 操作：onReady 是执行依赖于 DOM 的操作的最佳时机。由于此时页面已经完成初次渲染，DOM 元素已经存在，可以安全地进行选择和操作。

2. 初始化组件：可以在此时初始化一些需要 DOM 支持的组件，如地图、图表、富文本编辑器等。

3. 绑定事件监听器：如果需要绑定一些依赖于 DOM 元素的事件监听器，可以在 onReady 中进行绑定。

4. 动画和样式调整：如果需要在页面加载完成后立即执行动画或调整样式，onReady 是一个合适的时机。

5. 资源加载：如果页面需要加载额外的资源（如字体、图片等），在这些资源加载完毕后，onReady 可以确保这些资源已经被加载，从而可以安全地使用它们。

6. 第三方库初始化：如果页面使用了第三方库，这些库可能需要 DOM 元素存在才能正常工作，可以在 onReady 中进行初始化。

onHide 的用法

onHide 是 UniApp 中的一个页面生命周期函数，它在页面被隐藏时触发。这个函数非常适合用来处理页面隐藏时需要执行的操作，例如保存状态、暂停定时器、释放资源等。

---

onHide 主要在以下情况被触发：

1. 用户导航到另一个页面。
2. 用户切换到其他应用或锁屏。
3. 用户关闭当前页面（但在某些情况下，onUnload 而不是 onHide 会被触发）。

测试

1. 页面加载时：

   • 控制台输出 页面加载,触发onLoad。

2. 进入页面时：

   • 控制台输出 进入页面,触发onShow。

3. 页面渲染完成时：

   • 控制台输出 页面渲染完成,触发onReady。

4. 页面被隐藏时：

   • 控制台输出 页面被隐藏,触发onHide。

5. 页面被卸载时：

   • 控制台输出 页面卸载,触发onHide。

<template>
	<div>

	</div>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReady,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	onLoad(() => {
		console.log('页面加载,触发onLoad');
	})
	onShow(() => {
		console.log('进入页面,触发onShow');
	})
	onReady(()=>{
		console.log('页面渲染完成,触发onReady');
	})
	onHide(()=>{
		console.log('页面被隐藏,触发onHide');
		
	})
	onUnload(()=>{
		console.log('页面被销毁,触发onUnload');
	})
	
	
</script>

<style scoped>

</style>