微信小程序开发中组件的生命周期详细介绍

目录

• 组件的生命周期
• 自定义组件的生命周期函数
• 执行顺序
• 组件常用的生命周期函数
• lifetimes节点
• 组件所在页面的生命周期函数
• pageLifetimes节点

组件的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created、attached、 detached ，包含一个组件实例生命流程的最主要时间点。

自定义组件的生命周期函数

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

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

执行顺序

从该图中可以看出组件的 ready 与 detached 执行顺序并没有明确的先后关系。

组件常用的生命周期函数

在小程序组件中，最重要的生命周期函数有3个，分别是created、attached.

detached。它们各自的特点。如下︰

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

lifetimes节点

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

Component({
	lifetimes:{
	   created(){
	       console.log('created');
	   },
	   attached(){
	       console.log('attached');
	   }
	}
)}

注意：若不写在lifetime节点中且同时存在lifetime节点，优先执行lifetime节点中的生命周期函数，并覆盖掉节点之外的生命周期函数。

组件所在页面的生命周期函数

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

在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是:

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

pageLifetimes节点

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

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

当页面显示和隐藏时触发

到此这篇关于微信小程序开发中组件的生命周期详细介绍的文章就介绍到这了,更多相关小程序生命周期内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！