微信小程式--生命週期

小那發表於2024-03-06
微信小程式

目錄

1、什麼是生命週期

2、分類

  • 小程式應用的生命週期
  • 頁面的生命週期
  • 元件的生命週期

3、三種生命週期的詳解

4、頁面與元件

4.1條件渲染

4.2父子元件的影響

1、概念

生命週期：生命週期（Life Cycle）是指一個物件從建立 -> 執行 -> 銷燬的整個階段，強調的是一個時間段。

生命週期函式：是由小程式框架提供的內建函式，會伴隨著生命週期，自動按次序執行。

注意：生命週期強調的是時間段，生命週期函式強調的是時間點

2、分類

  • 小程式應用的生命週期
  • 頁面的生命週期
  • 元件的生命週期

3、詳解

3.1小程式應用生命週期

從小程式啟動->執行->銷燬的過程

app.js

App({
  //小程式初始化完成時，執行此函式，全域性只觸發一次。可以做一些初始化的工作。
  onLaunch: function(options) { },
  
  //小程式啟動，或從後臺進入前臺顯示時觸發。
  onShow : function(options) { },
  
  //小程式從前臺進入後臺時觸發。
  onHide : function() { }
})

補充：

3.2頁面生命週期

小程式的頁面生命週期函式需要在頁面的 .js 檔案中進行宣告。

Page({
  //監聽頁面載入，一個頁面只呼叫1次
  onLoad : function(options) { }，
  //監聽頁面顯示
  onShow : function() { },
  //監聽頁面初次渲染完成，一個頁面只呼叫1次
  onRcady : function() { },
  //監聽頁面隱藏
  onHide: function() { },
  監聽頁面解除安裝，一個頁面只呼叫1次
  onUnload: function() { }
})

3.3元件生命週期

元件的生命週期，指的是元件自身的一些函式，這些函式在特殊的時間點或遇到一些特殊的框架事件時被自動觸發。

Component({
  lifetimes: {
    attached: function() {
      // 在元件例項進入頁面節點樹時執行
    },
    detached: function() {
      // 在元件例項被從頁面節點樹移除時執行
    },
  },
  // 以下是舊式的定義方式，可以保持對 <2.2.3 版本基礎庫的相容
  attached: function() {
    // 在元件例項進入頁面節點樹時執行
  },
  detached: function() {
    // 在元件例項被從頁面節點樹移除時執行
  },
  // ...
})

元件生命週期函式補充：

元件所在頁面的生命週期

Component({
  pageLifetimes: {
    show: function() {
      // 頁面被展示
    },
    hide: function() {
      // 頁面被隱藏
    },
    resize: function(size) {
      // 頁面尺寸變化
    }
  }
})

3.4頁面與元件的執行過程

    • 開啟小程式：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead
    • 進入下一個頁面：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
    • 返回上一個頁面：(curr)onUnload --> (pre)onShow
    • 離開小程式：(App)onHide
    • 再次進入：小程式未銷燬 --> (App)onShow(執行上面的順序），小程式被銷燬，（App)onLaunch重新開始執行.

作者：別救了這猴子廢了
連結：https://juejin.cn/post/7151402790823133215
來源：稀土掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

4、頁面與元件

4.1條件渲染

元件可以透過 wx:if 和 hidden 來控制渲染的，這兩種方式對生命週期的觸發也有影響。

例：定義一個元件log

Component({
  lifetimes: {
    attached() {
      console.log('log attached')
    }
  }
})

使用 wx:if

<view wx:if="{{false}}"> <log /> </view> //不會觸發 attached，因此控制檯沒有輸出。

使用 hidden

<view hidden="{{true}}"> <log /> </view> //控制檯會輸出 log attached

比較：

以上兩種渲染的差異在於，hidden 會正常渲染 DOM，而 wx:if 則不會渲染 DOM。

如果元件的父元素使用 hidden 進行隱藏，那麼此時 created、attached、ready 生命週期均會正常觸發。如果在這些生命週期裡獲取子元素的尺寸，則所有值均返回 0。

4.2父子元件的觸發順序

    • 父元件 created
    • 子元件 created
    • 父元件 attached
    • 子元件 attached
    • 父元件 linked（觸發多次，次數 = 子元件數量）
    • 子元件 linked
    • 父元件 ready
    • 子元件 ready

<t-cell-group>
    <t-cell title="cell1" />
    <t-cell title="cell2" />
    <t-cell title="cell3" />
 </t-cell-group>

子元件 cell 的 setData 觸發次數為：1 + 2 + 3 = 6 次。

但其實開發者的預期應該是 1 次，所以 updateLastChid 應該放在父元件的 ready 方法裡才符合預期

相關文章