組件的全部生命周期函數(shù):

小程序可用的全部生命周期如下表所示:

組件主要的生命周期函數(shù):

在小程序中,最重要的生命周期函數(shù)有3個(gè),分別是created,attached,detached.它們各自的特點(diǎn)如下:

1.組件實(shí)例剛被創(chuàng)建好的時(shí)候,created生命周期函數(shù)會(huì)被觸發(fā)

• 此時(shí)還不能調(diào)用setData
• 通常在這個(gè)生命周期函數(shù)中,只應(yīng)該用于給組件的this添加一些自定義的屬性字段

2.在組件完全初始化完畢,剛進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)后,attached生命周期函數(shù)會(huì)被觸發(fā)

• 此時(shí),this.data已被初始化完畢
• 這個(gè)生命周期很有用,絕大多數(shù)初始化的工作可以在這個(gè)時(shí)機(jī)進(jìn)行(例如發(fā)請(qǐng)求獲取初始數(shù)據(jù))

3.在組件離開(kāi)頁(yè)面節(jié)點(diǎn)樹(shù)后,detached生命周期函數(shù)會(huì)被觸發(fā)

• 退出一個(gè)頁(yè)面時(shí),會(huì)觸發(fā)頁(yè)面內(nèi)每個(gè)自定義組件的detached生命周期函數(shù)
• 此時(shí)適合做一些清理性質(zhì)的工作

定義組件的生命周期函數(shù):

lifetimes節(jié)點(diǎn):

在小程序中,生命周期函數(shù)可以直接定義在Component構(gòu)造器的第一級(jí)參數(shù)中,可以在lifetimes字段內(nèi)進(jìn)行聲明(這是推薦的方式,其優(yōu)先級(jí)最高),示例代碼如下:

Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },
  // 推薦用法:
  lifetimes: {
    // 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
    attached() {},
    // 在組件實(shí)例被從頁(yè)面節(jié)樹(shù)移除時(shí)執(zhí)行
    detached() {}
  },
  // 以下是舊式的定義方式：
  // 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
  attached() {},
  // 在組件實(shí)例被從頁(yè)面節(jié)樹(shù)移除時(shí)執(zhí)行
  detached() {},
})

新舊兩種方式都存在時(shí),會(huì)優(yōu)先使用新的,往后不建議使用舊的方式了

什么是組件所在頁(yè)面的生命周期函數(shù):

有時(shí),自定義組件的行為依賴(lài)于頁(yè)面狀態(tài)的變化,此時(shí)就需要用到組件所在頁(yè)面的生命周期
例如:每當(dāng)觸發(fā)頁(yè)面的show生命周期函數(shù)的時(shí)候,我們希望能夠重新生成一個(gè)隨機(jī)的RGB顏色值:
在自定義組件中,組件所在的頁(yè)面的生命周期函數(shù)有如下3個(gè),分別是:

pageLifetimes

組件所在頁(yè)面的生命周期函數(shù),需要定義在pageLifetimes節(jié)點(diǎn)中,示例代碼如下:

// components/lifetimes/lifetimes.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },
  pageLifetimes: {
    show: function () {
      console.log('頁(yè)面被展示了');
    },
    hide: function () {
      console.log('頁(yè)面被隱藏了');
    },
    resize: function () {
      console.log('頁(yè)面變化了');
    },
  },
})

生成隨機(jī)的RGB顏色值:

Component({
  pageLifetimes: {
    show: function () {
      console.log('頁(yè)面被展示了,生成隨機(jī)顏色');
      this._randomColor()
    },
    hide: function () {
      console.log('頁(yè)面被隱藏了');
    },
    resize: function () {
      console.log('頁(yè)面變化了');
    },
  },
    // 生成隨機(jī)RGB顏色值：
    _randomColor() {
      this.setData({
        _rgb: {
          r: Math.floor(Math.random() * 256),
          g: Math.floor(Math.random() * 256),
          b: Math.floor(Math.random() * 256),
        }
      })
    }
})

運(yùn)行:

這里就是組件監(jiān)聽(tīng)了頁(yè)面的狀態(tài),在每次進(jìn)入頁(yè)面時(shí),生成一個(gè)隨機(jī)的RGb值,文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-486089.html

到了這里，關(guān)于微信小程序_16,組件的生命周期的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！