轉官方文件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

元件生命週期

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

其中，最重要的生命週期是createdattacheddetached，包含一個元件例項生命流程的最主要時間點。

• 元件例項剛剛被建立好時，created生命週期被觸發。此時，元件資料this.data就是在Component構造器中定義的資料data。此時還不能呼叫setData。通常情況下，這個生命週期只應該用於給元件this
  新增一些自定義屬性欄位。
• 在元件完全初始化完畢、進入頁面節點樹後，attached生命週期被觸發。此時，this.data已被初始化為元件的當前值。這個生命週期很有用，絕大多數初始化工作可以在這個時機進行。
• 在元件離開頁面節點樹後，detached生命週期被觸發。退出一個頁面時，如果元件還在頁面節點樹中，則detached會被觸發。

定義生命週期方法

生命週期方法可以直接定義在Component構造器的第一級引數中。

自小程式基礎庫版本2.2.3起，元件的的生命週期也可以在lifetimes欄位內進行宣告（這是推薦的方式，其優先順序最高）。

程式碼示例：

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

在 behaviors 中也可以編寫生命週期方法，同時不會與其他 behaviors 中的同名生命週期相互覆蓋。但要注意，如果一個元件多次直接或間接引用同一個 behavior ，這個 behavior 中的生命週期函式在一個執行時機內只會執行一次。

可用的全部生命週期如下表所示。

元件所在頁面的生命週期

還有一些特殊的生命週期，它們並非與元件有很強的關聯，但有時元件需要獲知，以便元件內部處理。這樣的生命週期稱為“元件所在頁面的生命週期”，在pageLifetimes定義段中定義。其中可用的生命週期包括：

程式碼示例：

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

本文來自部落格園，作者：鹹瑜，轉載請註明原文連結：https://www.cnblogs.com/bi-hu/p/15724282.html