组件的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created、attached、 detached ，包含一个组件实例生命流程的最主要时间点。

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

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

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object 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	无	组件所在的页面被隐藏时执行
resize	object Size	组件所在的页面尺寸变化时执行

pageLifetimes节点

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

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

当页面显示和隐藏时触发

自定义组件

类似vue或者react中的自定义组件。
微信小程序也 允许我们使用自定义组件的方式来构建页面。

当我们在开发小程序页面时，少不了哪些重复或类似的板块，需要我们复制粘贴一份源码进行编写，而组件恰恰解决了这个问题，它能让我们的代码复用率更高。开发更如鱼得水。

创建自定义组件

类似于页面，一个自定义组件由 .json .wxml .wxss .js 4个文件组成。

创建组件

可以在微信开发者工具中快速创建组件的文件结构。如图

创建好之后，便出现四个文件：如图

定义组件

此时我们新建一个页面-demo，在demo.json中可以使用刚才我们创建好的组件。

使用组件

首先让效果更明显，我们在组件的wxml文件中写入一些东西：

之后我们在页面demo.wxml中使用我们的组件：

出现如上效果则说明我们声明的组件已经被使用了

父组件向子组件传递数据

1. 父组件(页面)向子组件传递数据通过标签属性的方式来传递
   

2. 在子组件的.js文件上进行接收
   
   注意：若父组件给子组件不传值时则使用value中定义的值。

3. 在SuHeader.wxml中接收数据即可
   

子组件向父组件传递数据

1. 给地址绑定鼠标单击事件
   

2. 当单击事件被触发。给通过this.triggerEvent绑定父组件的自定义事件并且给父组件传递数据
   

3. 父组件的自定义事件
   

4. 在demo.js文件中触发父组件的自定义事件，注意与data配置项平级。
   

5. 触发单击响应事件
   

其他定义段与示例方法

定义段	类型	是否必填	描述
properties	object Map	否	组件的对外属性，是属性名到属性设置的映射表
data	object	否	组件的内部数据，和 properties一同用于模板渲染
observers	object	否	组件数据字段监听器，用于监听 properties和data的变化
methods	object	否	组件的方法，包括事件响应函数和任意的自定义方法
created	function	否	组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用setDat
attached	function	否	组件生念周期函数，在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数，在组件布局完成后执行
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行

详情可见官方文档：Component(Object object)