小程序组件生命周期

2025-01-03

指组件自身的钩子函数，在特定的时间节点自动触发。

需要在lifetimes字段内声明。

五个函数：created, attached, ready, moved, detached。

页面.js

  lifetimes: {

    // created：组件实例被创建好以后执行
    created () {
      console.log('组件 created')

      // 所以在 created 钩子函数中不能调用 setData
      // 可以给组件添加一些自定义的属性，可以通过 this 的方式进行添加
      this.test = '测试'
      // this.setData({
      //   name: 'jerry'
      // })
    },

    // 组件被初始化完毕，模板解析完成，已经把组件挂载到页面上
    attached () {
      console.log('组件 attached')
      console.log(this.test)

      // 一般页面中的交互会在 attached 钩子函数中进行执行
      this.setData({
        name: 'jerry'
      })
    },

    // 组件被销毁时
    detached () {
      console.log('组件 detached')
    }

  },

注意，created钩子函数不能调用setData

如何销毁组件?

设置if条件即可。

<custom06 wx:if="{{ num === 1 }}" />

组件所在页面的生命周期

组件还有一些特的生命周期，这类生命周期和组件没有很强的关联。

主要用于组件内部监听父组件的展示、隐藏状态，从而方便组件内部执行一些业务逻辑的处理组件所在页面的生命周期有4个：show、hide、resize、 routeDone，需要在 pageLifetimes 字段内进行声明。

页面.js

  // 组件所在页面的生命周期
  pageLifetimes: {

    // 监听组件所在的页面展示(后台切前台)状态
    show () {
      console.log('组件所在的页面被展示')
    },

    // 监听组件所在的页面隐藏(前台切后台、点击 tabBar)状态
    hide () {
      console.log('组件所在的页面被隐藏')
    }

  }