自定义组件⑥组件的生命周期-微信小程序开发（二十三）

1. 组件全部的生命周期函数

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

2. 组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各自的特点
如下：
① 组件实例刚被创建好的时候，created 生命周期函数会被触发
⚫ 此时还不能调用 setData
⚫ 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
② 在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发
⚫ 此时， this.data 已被初始化完毕
⚫ 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
③ 在组件离开页面节点树后， detached 生命周期函数会被触发
⚫ 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
⚫ 此时适合做一些清理性质的工作

3. lifetimes 节点

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段
内进行声明（这是推荐的方式，其优先级最高）。示例代码如下：

Component({
  //推荐用法
  lifetimes:{
    attached(){}, //在组件实例进入页面节点树时执行
    detached(){}  //在组件实例被从页面节点树移除时执行
  },
  //以下是旧式的定义方式
  attached(){}, //在组件实例进入页面节点树时执行
  detached(){}  //在组件实例被从页面节点树移除时执行
})

组件所在页面的生命周期

1. 什么是组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。
例如：每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值。
在自定义组件中，组件所在页面的生命周期函数有如下 3 个，分别是：

2. pageLifetimes 节点

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中，示例代码如下：

Component({
  pageLifetimes:{
    show:function(){}, //页面被展示
    hide:function(){}, //页面被隐藏
    resize:function(size){} //页面尺寸变化
  }
})

3. 生成随机的 RGB 颜色值

Component({
  pageLifetimes:{
    //组件所在页面被展示时，立即调用 _randomColor 生成随机颜色值
    show:function(){
      this._randomColor()
    }, 
  },
methods: {
    //生成随机RGB颜色的方法，非事件处理函数，建议以 _ 开头
    _randomColor(){
      this.setData({ //为data里面的 _rgb 纯数据字段重新赋值
        _rgb:{
          r:Math.floor(Math.random()*256),
          g:Math.floor(Math.random()*256),
          b:Math.floor(Math.random()*256)
        }
      })
    }
  }
})