微信小程序--生命周期

目录

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 方法里才符合预期