微信小程序开发---自定义组件的生命周期函数_微信小程序 lifetimes

目录

一、组件的生命周期函数

 二、lifetimes节点

三、页面的生命周期

 四、pageLifetimes节点

一、组件的生命周期函数

生命周期函数   参数          说明
created         无          在组件实例刚刚被创建时执行
attached        无          在组件实例进入页面节点树时执行
ready           无          在组件在视图层布局完成后执行
moved           无          在组件实例被移动到节点树另一个位置时执行
detached        无          在组件实例被从页面节点树移除时执行
error        Object Error   每当组件方法抛出错误时执行

注意：

在小程序组件中，最重要的生命周期函数有三个，如下：

（1）created

组件实例刚刚被创建的时候，created声明周期函数就会被触发，此时还不能调用setData，通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段。

（2）attached

在组件完全初始化完毕，进入页面节点树后，attached生命周期函数会被触发。

此时this.data已被初始化完毕，这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始化数据）

（3）detached

在组件离开页面节点树后，detached生命周期函数会被触发

退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数，此时适合做一些清理性质的工作

 二、lifetimes节点

生命周期函数可以直接定义在conpoment构造器的第一级参数中，可以在lifetimes字段内进行声明。

Component({
  /**
   * 组件的属性列表
   */
  lifetimes:{
    attached(){
      console.log("来了")
    },
    detached(){
      console.log("走了")
    }
  }
)}

三、页面的生命周期

有时候，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期

生命周期函数   参数            说明
show            无          组件所在的页面被展示时执行
hide            无          组件所在的页面被隐藏时执行 
resize       Object Size    组件所在的页面尺寸变化时执行

 四、pageLifetimes节点

组件所在页面的生命周期函数，需要定义在pageLifetimes节点中

Component({
 
    pageLifetimes:{
     show(){
       console.log("llll")
     },
     hide(){
 
     },
     resize(){
 
     }
  },
})