页面生命周期概览

vue3页面生命周期如下图所示：

 

 

onLoad

此时页面还未显示，没有开始进入的转场动画，页面dom还不存在。

所以这里不能直接操作dom（可以修改data，因为vue框架会等待dom准备后再更新界面）；在 app-uvue 中获取当前的activity拿到的是老页面的activity，只能通过页面栈获取activity。

onLoad比较适合的操作是：接受上页的参数，联网取数据，更新data。

手机都是多核的，uni.request或云开发联网，在子线程运行，不会干扰UI线程的入场动画，并行处理可以更快的拿到数据、渲染界面。

但onLoad里不适合进行大量同步耗时运算，因为此时转场动画还没开始。

尤其uni-app x 在 Android上，onLoad里的代码（除了联网和加载图片）默认是在UI线程运行的，大量同步耗时计算很容易卡住页面动画不启动。除非开发者显式指定在其他线程运行。

 onReady

第2步创建dom是虚拟dom，dom创建后需要经历一段时间，UI层才能完成了页面上真实元素的创建，即触发了onReady。

onReady后，页面元素就可以自由操作了，比如ref获取节点。同时首批界面也渲染了。

注意：onReady和转场动画开始、结束之间，没有必然的先后顺序，完全取决于dom的数量和复杂度。

下面通过实际案例来掌握这2个生命周期函数的用法

demo5中有一导航

<view>
	<navigator url="/pages/demo6/demo6?name=Jimy&age=20">跳转到demo6</navigator>
</view>

demo6中在onLoad函数中获取参数值

<template>
	<view>
		姓名：{{name}}
		年龄：{{age}}
	</view>
	<scroll-view scroll-y="true"  ref="scroll">
		<view></view>
	</scroll-view>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onReady} from "@dcloudio/uni-app"
	const name = ref("Jim")
	const age = ref("16")
	const scroll = ref(null)
	onLoad((e)=>{
		console.log(e)
		name.value = e.name
		age.value = e.age
		console.log("onload时的值："+scroll.value)
	})
	onReady((e)=>{
		console.log("onReady时的值："+scroll.value)
		console.log("onReady时获取到的参数值："+e)
	})
</script>

onLoad和onReady需要引入才能使用