uni-app学习笔记十五-vue3页面生命周期(一)

页面生命周期概览

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.nameage.value = e.ageconsole.log("onload时的值："+scroll.value)})onReady((e)=>{console.log("onReady时的值："+scroll.value)console.log("onReady时获取到的参数值："+e)})
</script>

onLoad和onReady需要引入才能使用