微信小程序 自定义组件 教程（二） | 组件js结构、组件生命周期及对应方法、组件变量监听器

一、往期回顾 & 导语

往期传送门：微信小程序 自定义组件 教程（一） | 封装、声明、使用 三部曲

在教程（一）中，我们已经创建了一个自定义组件，但还只停留在最初级的“能使用”阶段。
我们还没有触及到任何组件内的方法。
本期我将介绍：组件js的内部结构、组件的生命周期以及最实用的生命周期方法、如何为组件内的变量设置一个监听器，动态获取变量值。

二、组件js的内部结构

以下代码是初创组件后，组件js内的默认内容。

// components/repeat-part/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

1. 组件的属性列表（即properties）

组件的属性列表（即properties）中，填写的内容为 页面向组件传的值（或 父组件向子组件传的值）。
若没有任何传值，空着即可。
若有，结构为：

变量名: 变量类型

若变量名为多个单词构成，页面（或父组件）的组件标签内，单词间用短横线连接，如：

而组件js的properties内，采用驼峰式命名法。
这里例举几个常用的数据类型：

Component({
  properties: {
    propA: String, // 字符串型
    propB: Number, // 数字型
    propC: Array, // 数组型
    propD: Object, // 对象型
    propE: Boolean, // 布尔型
  },
})

（本期只介绍结构，具体传值教程将放在下一期）

2. 组件的初始数据（即data）

自定义组件js内的data，与页面js内的data类似，结构为：

变量名: 变量值

例如：

Component({
  data: {
    dataA: "我是初始数据A",
    dataB: 123,
    dataC: ['数组第一项', '数组第二项'],
  },
})

（我就默认来看自定义组件教程的同学多多少少有过小程序页面开发的经验了，应该对data部分有一定了解，因此在这里就不做过多介绍啦。）

3. 组件的方法列表（即methods）

顾名思义，所有的该组件内部的自定义方法（自定义函数），都写在这里面。
例如：

Component({
  methods: {
    methodA () {
      console.log("方法A执行了")
    },

    methodB (event) {
      console.log("方法B执行了")
      console.log("我是本方法的事件参数：", event)
    },
  },
})

三、组件生命周期及对应方法

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

可用的全部生命周期如下表所示：

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

特别要注意的是： 当组件实例刚刚被创建好时，created生命周期被触发。此时，组件数据this.data就是在Component构造器中定义的数据data。。

最实用的组件生命周期：attached

在组件完全初始化完毕、进入页面节点树后， attached生命周期被触发。此时，this.data已被初始化为组件的当前值。。
attached这个生命周期是最实用的，没有之一。绝大多数初始化工作都可以在这个生命周期中进行， 类似于页面的onLoad。

其余生命周期都不太常用，在此就不做过多介绍了。

定义 组件的生命周期方法（函数）

（这里只介绍 小程序基础库版本2.2.3以上的定义方式。一是因为2.2.3以下版本用的人实在太少了，几乎已经没有了；二是因为这也是推荐的方式，其优先级最高。）

在组件js的lifetimes字段内 定义 组件的的生命周期方法（函数），示例代码如下：

Component({
  lifetimes: {
    attached () {
      // 在组件实例进入页面节点树时执行
    },
  },
})

四、组件变量监听器

1. 假设组件js内原有内容如下

Component({
  properties: {},  // 本例中未涉及到父子传值，因此组件的属性列表为空

  data: {
    dataA: 1,  // 组件的初始数据dataA
  },

  methods: {
    changeValue() {  // 这是组件内的自定义方法，方法名 为：changeValue
      const value = this.data.dataA + 1  // 这里使用了组件的初始数据dataA，并将dataA的值+1后赋值给value
      this.setData({  // 调用setData方法，更改本组件内dataA的值，设定为value的值
        dataA: value,
      })
    },
  },

  lifetimes: {
    attached() {  // 在组件实例进入页面节点树时执行attached方法
      this.changeValue()  // 这里调用了组件的自定义方法 changeValue
    },
  },
})

在本例中，会更改一次组件内变量dataA的值。下面，我们为该变量dataA设置一个监听器，动态获取变量dataA值。

2. 设置监听器

方法其实很简单，只需在Component构造器的第一级参数中，添加如下代码：

Component({
  ...

  observers: {
    'dataA'(dataA) {  // 这里，单引号内的dataA是this.data中要监听的变量名；括号内的dataA是本监听方法的参数，即该监听变量，命名随意，一般情况下还是与变量名保持相同。
      console.log("dataA的当前值为：", dataA)
    },
  },
})

这里的observers即表示监听器，所有需监听的变量，都写在observers之内。

单引号内的dataA是this.data中要监听的变量名；
括号内的dataA是本监听方法的参数，即该监听变量，命名随意，一般情况下还是与变量名保持相同。

3. 监听结果

监听结果为：

dataA的当前值为： 2

如下图所示：

监听结果

4. 额外说明

监听器不止可以用于监听data内的变量，也同样适用于properties内的变量。

若需同时监听多个变量，写法如下：

Component({
  ...

  observers: {
    'dataA'(dataA) {
      console.log("dataA的当前值为：", dataA)
    },

    'dataA, dataB'(dataA, dataB) {
      console.log("dataA,dataB的当前值为：", dataA, dataB)
    },
  },
})

同时监听多个变量时，其中任意一个变量的值发生改变，就会触发一次这个监听器。

切记：不要在本监听器中setData该监听器正监听的变量，会构成死循环，导致IDE（开发者工具）崩溃。
若有此类需求，避免不了setData操作，可采用中间变量。（类似于编程经典题：交换a和b的值。temp = a; a = b; b = temp;）

本期教程 完
下期预告：页面与组件、组件与组件间的传值、多级组件冒泡传值

我是小寅，一枚95后程序媛~ 感谢阅读，欢迎补充 & 质疑~