组件生命周期 | 任先生的笔记库

关于组件的生命周期：

官方文档：

组件生命周期 (opens new window)

# 1、组件的生命周期

Component({
  lifetimes: {
    created: function () {
      // 组件实例刚刚被✨创建好时（还不能调用 setData）
    },

    attached: function () {
      // 组件完全✨初始化完毕、进入页面节点树后
    },

    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    }
  }
})
 
        Copied!

# 2、组件所在页面的生命周期

在小程序组件中，除了有组件自身的生命周期外，还有可以监听当前组件所在的页面的生命周期函数

回顾：页面生命周期函数

Page({
  /**
   * 页面的初始数据
   */
  data: {},

  /**
   * 监听页面✨加载（一个页面只触发一次）
   */
  onLoad: function (options) {},

  /**
   * 监听页面初次✨渲染完成（一个页面只触发一次）
   */
  onReady: function () {},

  /**
   * 监听页面显示
   */
  onShow: function () {},

  /**
   * 监听页面隐藏
   */
  onHide: function () {},

  /**
   * 监听页面卸载（一个页面只触发一次）
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉🎈动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉🎈触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {}
})
 
        Copied!

Component({
  pageLifetimes: {
    show: function () {
      // 页面被展示
    },

    hide: function () {
      // 页面被隐藏
    },

    resize: function (size) {
      // 页面尺寸变化
    }
  }
})
 
        Copied!

# 3、版本兼容性

Component({
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    }
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function () {
    // 在组件实例进入页面节点树时执行
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
  }
  // ...
})
 
        Copied!

在 lifetimes 字段内声明的生命周期函数优先级是要高于在 Component 构造器的第一级参数中的生命周期函数的。

← 自定义组件组件通信 →