微信小程序最全面Component组件生命周期

const app = getApp()

Component({
  behaviors: [require('miniprogram-computed')],
  /**
   * 使用全局样式属性
   */
  options: {
    addGlobalClass: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * miniprogram-computed提供计算属性
   */
  computed: {
  },
  /**
   * 自带的监听器
   */
  observers: {
  },
  /**
   * miniprogram-computed提供监听器
   */
  watch: {
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /*组件生命周期*/
  lifetimes: {
    created: function () {
      console.log("在组件实例刚刚被创建时执行")
    },
    attached: function () {
      console.log("在组件实例进入页面节点树时执行")
    },
    ready: function () {
      console.log("在组件在视图层布局完成后执行")
    },
    moved: function () {
      console.log("在组件实例被移动到节点树另一个位置时执行")
    },
    detached: function () {
      console.log("在组件实例被从页面节点树移除时执行")
    },
    error: function () {
      console.log("每当组件方法抛出错误时执行")
    }
  },
  /*组件所在页面的生命周期 */
  pageLifetimes: {
    show: function () {
      // 页面被展示
      console.log("页面被展示")
    },
    hide: function () {
      // 页面被隐藏
      console.log("页面被隐藏")
    },
    resize: function (size) {
      // 页面尺寸变化
      console.log("页面尺寸变化")
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

使用miniprogram-computed

可以参考我的另外一个文章
微信小程序使用miniprogram-computed遇到的问题

参考

• 微信小程序生命周期、页面生命周期、组件生命周期
• 微信小程序computed
• 微信小程序Component