現(xiàn)時代的前端項目開發(fā)，都是基于組件化的，因此學(xué)好微信小程序-組件的生命周期會更加有利于我們開發(fā)高質(zhì)量的項目代碼。

搭建父子組件結(jié)構(gòu)

1. 新建組件 components\chitu\chitu

   

2. 頁面中引用

   1. index.json

      {
        "usingComponents": {
          "chitu":"/components/chitu/chitu"
        }
      }
      復(fù)制代碼

   2. index.wxml

      <chitu>chitu>
      復(fù)制代碼

組件自身的生命周期

生命周期	描述
created	在組件實例剛剛被創(chuàng)建時執(zhí)行
attached	在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行
ready	在組件在視圖層布局完成后執(zhí)行
moved	在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行
detached	在組件實例被從頁面節(jié)點樹移除時執(zhí)行
error	每當(dāng)組件方法拋出錯誤時執(zhí)行

組件所在頁面的生命周期

還有一些特殊的生命周期，它們并非與組件有很強(qiáng)的關(guān)聯(lián)，但有時組件需要獲知，以便組件內(nèi)部處理。這樣的生命周期稱為“組件所在頁面的生命周期”，在 pageLifetimes 定義段中定義。其中可用的生命周期包括：

生命周期	描述
show	組件所在的頁面被展示時執(zhí)行
hide	組件所在的頁面被隱藏時執(zhí)行
resize	組件所在的頁面尺寸變化時執(zhí)行

具體實現(xiàn)可以參考如下

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

created

組件實例剛剛被創(chuàng)建時觸發(fā) 此時不 setData 不生效

觸發(fā)時機(jī)

組件實例剛剛被創(chuàng)建時觸發(fā)

作用

可以給 this 添加一些自定義屬性

代碼

Component({
  lifetimes: {
    /**
     * 組件剛剛創(chuàng)建完畢
     */
    created() {
      console.log("created 組件剛剛創(chuàng)建完畢");
    } 
  }
})
復(fù)制代碼

效果

attached

組件實例 被創(chuàng)建到頁面節(jié)點時觸發(fā) 此時已經(jīng)可以使用 setData

觸發(fā)時機(jī)

組件實例 被創(chuàng)建到頁面節(jié)點時觸發(fā) 此時已經(jīng)可以使用 setData

作用

一般用在發(fā)送異步請求獲取數(shù)據(jù)賦值data然后渲染頁面

代碼

Component({
  lifetimes: {
    /**
     * 組件實例 被創(chuàng)建到頁面節(jié)點時觸發(fā)
     */
    attached(){
      console.log("attached 組件實例 被創(chuàng)建到頁面節(jié)點時觸發(fā)");
    }
  }
})
復(fù)制代碼

效果

ready

組件視圖渲染完畢后觸發(fā)

觸發(fā)時機(jī)

組件視圖渲染完畢后觸發(fā)

作用

可以用在獲取渲染結(jié)束后的節(jié)點樣式

代碼

Component({
  lifetimes: {
    /**
     * 組件視圖渲染完畢后觸發(fā)
     */
    ready() {
      console.log("ready 組件視圖渲染完畢后觸發(fā) ");
    },
  }
})
復(fù)制代碼

效果

moved

當(dāng)組件節(jié)點位置發(fā)生改變時生效

觸發(fā)時機(jī)

我們這樣理解 存在一個數(shù)組 通過循環(huán)生成了一系列組件，當(dāng)數(shù)組中的元素發(fā)生位置改變時，那么其中的組件的位置也發(fā)生了改變。這樣便會觸發(fā) move 生命周期

作用

可用做組件自身由于位置改變而附帶的副作用

代碼

1. 父頁面

   1. index.js

            
      Page({
        data: {
          list: [
            { id: 0, text: 0 },
            { id: 1, text: 1 }
          ]
        },
        onLoad: function () {
          setTimeout(() => {
            const [a, b] = this.data.list;
            const list = [b, a];
            this.setData({ list })
          }, 2000);
        },
      })
      復(fù)制代碼

   2. index.wxml

      
         {{item.text}} 
      
      復(fù)制代碼

2. 子組件

   1. wxml

      <view><slot>slot>view>
      復(fù)制代碼

   2. js

      Component({
          /**
           * 組件的位置發(fā)生改變時觸發(fā)
           */
          moved() {
            console.log("moved 組件的位置發(fā)生改變時觸發(fā)");
          }
        }
      })
      復(fù)制代碼

效果

定時器等待 2s 通過 setData 修改數(shù)組 同時觀察頁面中的 文本

detached

當(dāng)組件在頁面中被移除時觸發(fā)

觸發(fā)時機(jī)

當(dāng)組件在頁面中被移除時觸發(fā) 組件在父頁面中通過 wx:if 實現(xiàn)了隱藏即為被移除

作用

停止異步任務(wù)

代碼

1. 父頁面

   1. index.js

      Page({
        data: {
          show: true
        },
        onLoad: function () {
          setTimeout(() => {
            this.setData({ show: false })
          }, 2000);
        }
      })
      復(fù)制代碼

   2. index.wxml

      <view>
        <chitu wx:if="{{show}}">赤兔chitu>
      view>
      復(fù)制代碼

2. 子組件

   Component({
     lifetimes: {
       /**
        * 當(dāng)組件在頁面中被移除時觸發(fā)
        */
       detached(){
         console.log("detached 當(dāng)組件在頁面中被移除時觸發(fā)");
       } 
     }
   })
   復(fù)制代碼

效果

error

當(dāng)組件內(nèi)代碼出現(xiàn)錯誤時觸發(fā)

觸發(fā)時機(jī)

當(dāng)組件內(nèi)代碼出現(xiàn)錯誤時觸發(fā)

作用

可以用做收集錯誤信息 或者給出用戶友好提示

代碼

Component({
  lifetimes: {
    created() {
      // 瞎調(diào)用一通
      this.setabcd();
    },
    /**
     * 當(dāng)組件內(nèi)的代碼出現(xiàn)錯誤時觸發(fā)
     */
    error(){
      console.log("error 當(dāng)組件內(nèi)的代碼出現(xiàn)錯誤時觸發(fā)");
    }
  }
})
復(fù)制代碼

效果