大家好，这是小程序系列的第七篇文章，基础篇已经快了，感觉再分享一下事件系统后小程序的基础篇就可以结束了，剩下的直接进实战篇里进行学习：
1.《微信小程序-基础篇》带你了解小程序的路由系统（一）
2.《微信小程序-基础篇》带你了解小程序的路由系统（二）
3.《微信小程序-基础篇》带你了解小程序中的生命周期（一）
这一篇文章分享的是关于小程序中组件生命周期的一些基本知识，介绍完基础以后会实际同步开发一个微信小程序的项目并开源，项目的主题暂定是原神的资料站~~~
–
最后，求关注，求收藏，求点赞，这是一个系列文章，建议专栏收藏，肯定分享的都是跟小程序相关的，谢谢～

前言

上篇我们分享了小程序中的 应用生命周期 和 页面生命周期，这一篇主要的内容是 关于小程序中组件的生命周期，之前我们说过，组件化开发已然成为了前端开发中的一个标准化的开发模式，那么组件的生命周期自然就是组件开发中的重中之重，它能在组件的加载中实现多种期望的功能；
耐心看完，你一定有所收获～

阅读对象与难度

本文难度属于：初级，适合 初学小程序的开发者，通过本文，你可以了解到小程序中的组件的生命周期具体有哪些，以及这些生命周期的用法是如何使用的，执行顺序是什么样子的，大致思维导图如下：

组件生命周期

生命周期是什么我们通过上篇知道了，除了 应用声明周期 和 页面生命周期 外还有一个 组件生命周期，官网介绍的原话是：指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。大概意思就是，我们知道生命周期指的是从加载到销毁这个过程，在这个过程中可以分为好多阶段，比如，创建阶段，挂载阶段，销毁阶段等等，在每个阶段程序内部都会向外抛出一个 回调函数，这个回调函数，就是生命周期；
组件生命周期在官网的介绍地址如下：组件生命周期

介绍

首先我们先看一下组件的声明周期有哪些吧，之后在详细介绍（数据来自官网）

用法

用法其实也简单，之所以要单独列一个二级标题是因为小程序在发展的过程中发生过一次迭代，版本为2.2.3版本，虽然目前两种写法都是支持的，但是 推荐使用lifetimes的写法：

Component({
  // lifetimes的写法是推荐写法
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
    detached: function(){
      // 在组件实例被从页面节点树移除时执行
    }
  },
  // 不推荐，以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  detached: function(){
    
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

created

在组件实例刚刚被创建时执行，直接在组件的内部写就行了

// component/Button/button.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    size:{
      type:String,
      value:"normal",
    },
    type:{
      type:String,
      value:"default",
    },
    long:{
      type:Boolean,
      value:false,
    }
  },
  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {},
  lifetimes:{
    created:function(){
      console.log("------ 创建Button组件时触发created ------")
      console.log(this.properties)
    },
  }
  
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

值得注意的是，在这个阶段由于组件刚刚被创建，this.setData这些函数是不会生效的，在这个生命周期内，我们只可以获取一些基本的值以及数据上的做处理，跟页面渲染相关的内容不能在这个生命周期实现；
我们可以做一个实验，以，大致是Button显示的文字来自于data里面的属性，我们在created生命周期中去手动改变这个值，看Button上的结果是否会改变

<!--component/Button/button.wxml-->
<button>{{name}}</button>
1
2

// component/Button/button.ts
Component({
  /**
   * 组件的初始数据
   */
  data: {
    name:"按钮"
  },
  lifetimes:{
    created:function(){
      console.log("------ 创建Button组件时触发created ------")
      this.setData({name:"按钮create"})
    },
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果如下：

很明显，修改没有生效，那么换一个生命周期做对照实验

lifetimes:{
  created:function(){
    console.log("------ 创建Button组件时触发created ------")
    this.setData({name:"按钮create"})
  },
  attached:function(){
    console.log("------ 创建Button组件时触发attached ------")
    this.setData({name:"按钮attached"})
  }
}
1
2
3
4
5
6
7
8
9
10

确实生效了，如下图

attached

组件初始化完毕并且挂载到页面上之后触发，如果熟悉vue的话，和vue的mounted比较像，这个阶段才是我们一般做初始化的阶段，并且在这个阶段data也被初始化为组件的值；
举个例子吧，假设button上显示的文字所有都必须加上test文字，如果要实现，我们就可以在attached生命周期里获得text文字，拼接上test之后，重新setData到里面

  lifetimes:{
    created:function(){
      console.log("------ 创建Button组件时触发created ------")
      this.setData({name:"按钮create"})
    },
    attached:function(){
      console.log("------ 创建Button组件时触发attached ------")
      this.setData({name:this.properties.text+' test'})
    }
  }
1
2
3
4
5
6
7
8
9
10

ready

官方的说法：在组件在视图层布局完成后执行，简单的说，就是组件被挂载到页面上，并且页面渲染完毕后触发；这个生命周期我们一般处理一些跟视图操作相关的内容；
举个例子吧，比如我们有一个树组件，这个组件当挂载完毕后，再获取某些状态数据，这些状态数据控制节点的展开与收缩，这种更新视图的操作，就可以放在ready这种生命周期里；
使用方式和其它的一样的

lifetimes:{
  ready:function(){
    console.log("------ 创建Button组件时触发ready ------")
    console.log(this.properties)
  }
}
1
2
3
4
5
6

moved

官方的说法：在组件实例被移动到节点树另一个位置时执行，这个生命周期用到的相对比较少，有些冷门，可能我接触的比较少，至少我到现在似乎都没有具体哪个的实现是需要靠这个生命周期实现的，github上找了个组件库查了查这个生命周期的用的地方，结果竟然没有，这就真把我尬住了，如果有小伙伴知道什么地方能使用这个moved的地方，请告诉我一下，谢谢…
用法的话，一样，比较简单

lifetimes:{
  moved:function(){
    console.log("------ 创建Button组件时触发moved ------")
    console.log(this.properties)
  }
}
1
2
3
4
5
6

detached

在组件实例被从页面节点树移除时执行，简单的说，就是这个 **组件被销毁 **的时候会被执行，这个使用的还是非常频繁的，举个例子吧：
有一个radioGroup做切换，根据不同的选项会显示不同的按钮，我们知道微信也是MVVM框架，那么使用条件渲染的时候，如果值为false，那么这个组件就会不显示被销毁，销毁就会触发这个detached生命周期函数，有时候我们组件可能要在被销毁的时候执行一些特殊的事件，这些特殊的事件可以放在detached这个生命周期里执行；

lifetimes:{
  detached:function(){
    console.log("------ 创建Button组件时触发detached ------")
    console.log(this.properties)
  }
}
1
2
3
4
5
6

执行顺序

直接看例子吧，比较有效果

顺序可以看到是：created -> attached -> ready，至于其他的，需要在对应的环境被触发后才会被触发；

小结

在本文中，我们知道了 组件其实也是有生命周期的，组件在不同的阶段会触发称作为生命周期的回调函数，作用就是为了方便使用者可以在不同的阶段处理数据或者界面；
组件的生命周期一共有6个，分别是：created，attached，ready，moved，detached，error，其中最常用的是3个，attached，ready和detached，作用分别是：

• attached： 在组件实例进入页面节点树时执行，也就是俗称的挂载阶段，有点类似于Vue中的mounted生命周期；
• ready： 在组件在视图层布局完成后执行，就是组件被挂载到页面上，并且页面渲染完毕后触发；
• detached：在组件实例被从页面节点树移除时执行，简单的说，就是这个 组件被销毁 的时候会被执行；

最后，我们介绍了组件的执行顺序，抛开需要特殊触发条件的生命周期，正常的顺序是：created -> attached -> ready；