頁面生命周期概覽

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需要引入才能使用