uniapp 生命週期(onLoad跟onLoadonShow的區別)

一、uniapp生命週期分兩種 :

1、應用生命週期：僅可在App.vue中監聽，在其它頁面監聽無效。

2、頁面生命週期：僅在page頁面中監聽，而單獨封裝的元件中【頁面週期無效】，但是Vue的生命週期依然有效 【Vue的生命週期在任何地方都是有效的】

二、頁面生命週期

1、頁面的載入過程是：載入-顯示-載入完成-頁面隱藏-頁面解除安裝

2、頁面生命週期的出發過程：onLoad:監聽頁面載入 =》 onShow:監聽頁面顯示 =》 onReady:監聽頁面初次渲染完成 =》 onHide:監聽頁面隱藏 =》 onUnload:監聽頁面解除安裝

3、onLoad跟onLoadonShow的區別

(1)onShow: 監聽頁面顯示。頁面每次出現在螢幕上都觸發，包括從下級頁面點返回露出當前頁面

例如：頁面b:通過快取跳轉到頁面a

頁面B:快取一個變數newMember uni.setStorageSync('newMember', this.newMember)

頁面A可以接受這個引數變數:onShow() { let str = uni.getStorageSync('newMember') },

(2) onLoad:只加載一次，監聽頁面載入，其引數為上個頁面傳遞的資料，引數型別為Object（用於頁面傳參）

只加載一次 所以如果b頁面不斷的修改資料 再通過onLoad(){ uni.navigateBack({delta: 1,}) 回到A頁面 a頁面的資料不會隨之改變

總結：A頁面跳轉到B頁面後，從二級頁面B返回該頁面A時，onLoad不會再次載入，而onshow會重新載入。

應用選擇：

1.如果載入列表頁，二級頁面對一級的列表頁面內容有修改，則以及列表函式應該在onShow中載入，否則可以選擇onLoad。

2.如果從一個頁面攜帶引數跳轉到另外一個頁面，在另一個頁面獲取引數的方式：onLoad(options){ console.log(options.xxx) },這些引數都掛在在options.

3.在一些資料變化較少的時候我們用onload

4：像這些order訂單列表資料變化及時性我們用的是onshow;

• onLoad先於onShow執行
• onLoad頁面的整個生命週期裡，只執行一次
• onShow頁面的整個生命週期裡，可執行多次，即每次顯示都會執行
• 獲取引數並且只請求一次的事件放在 onLoad 裡。
• 當前頁面需要時時刷資料的請求多次的事件放在 onShow 裡。