【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期（三十六）

• 所属专栏：【微信小程序开发教程】

• 作  者：我是夜阑的狗

• 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

• 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信

---

前言

  大家好，又见面了，我是夜阑的狗，本文是专栏【微信小程序开发教程】专栏的第36篇文章;
  今天开始学习微信小程序的第21天，开启新的征程，记录最美好的时刻，每天进步一点点。
  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴。
  如果文章有什么需要改进的地方还请大佬不吝赐教。

---

一、纯数据字段

  前面通过案例完整学习了自定义组件中数据监听器的用法，以及监听指定数据和所有数据的方法。接下来就来讲解一下另外一个自定义组件 - 纯数据字段 & 组件的生命周期。上个周末连着两天没写偷懒了，一天不学习，罪恶感嘎嘎上升呀。话不多说，让我们原文再续，书接上回吧。

1、什么是纯数据字段

  纯数据字段顾名思义指的是那些不用于界面渲染的 data 字段。应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。
  比如前面学习过数据监听器案例中，像 r, g, b 这三个值是没有必要渲染到页面上的，所以这三个适合当纯数据字段。

  设置为纯数据字段有助于提升页面更新的性能。

2、基本语法

  在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个 正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下：

Component({
  options: {
    // 指定所以 _开头的数据字段为纯数据字段
    pureDataPattern: /^_/
  },

  /**
   * 组件的初始数据
   */
  data: {
    _rgb: {
      r: 0, 
      g: 0, 
      b: 0
    },
    // 根据 rgb 对象的三个属性，动态计算 fullColor 的值
    fullColor: '0, 0, 0' 
  },
})

  注意：纯数据字段只能用于页面逻辑的处理，不能用于页面渲染。

3、使用纯数据字段改造数据监听器案例

  了解纯数据字段基本用法之后，接下来就通过改造数据监听器案例来巩固一下吧，具体代码如下所示：

test3.js

Component({
  options: {
    // 指定所以 _开头的数据字段为纯数据字段
    pureDataPattern: /^_/
  },

  /**
   * 组件的初始数据
   */
  data: {
  	//将 rgb 改造为纯数据字段
    _rgb: {
      r: 0, 
      g: 0, 
      b: 0
    },
    // 根据 rgb 对象的三个属性，动态计算 fullColor 的值
    fullColor: '0, 0, 0' 
  },
})

  改造完成之后，编译运行发现运行结果跟之前是一样的，如下图所示：

二、组件的生命周期

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

1、组件全部的生命周期函数

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

生命周期	参数	描述	最低版本
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

2、组件主要的生命周期函数

  在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached，包含一个组件实例生命流程的最主要时间点。。它们各自的特点如下：

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

• 此时还不能调用 setData 。
• 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

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

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

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

• 退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
• 此时适合做一些清理性质的工作。

3、定义生命周期方法

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

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

  在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。
  behaviors 后续会学习到，这里先了解即可。

• 旧式的定义方式

test3.js

Component({
  created(){
    console.dir("created");
  },
  attached(){
    console.dir("attached");
  },
   /**
   * 组件的初始数据
   */
  data: {...}
})

  可以来看一下运行效果：

• 新的定义方式（推荐）

test3.js

Component({
  created(){
    console.dir("created");
  },
  attached(){
    console.dir("attached");
  },
  lifetimes:{
    created(){
      console.dir("created-------");
    },
    attached(){
      console.dir("attached------");
    },
  },
   /**
   * 组件的初始数据
   */
  data: {...}
})

  注意，如果新的跟旧的在一起，新的就会覆盖旧的定义方式，在实际开发过程中是不推荐用旧的定义方式，可以来看一下运行效果：

---

总结

  感谢观看，这里就是自定义组件 - 纯数据字段 & 组件的生命周期的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。

  也欢迎你，关注我。

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！ 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。

更多专栏订阅:

• 【LeetCode题解（持续更新中）】
• 【Java Web项目构建过程】
• 【微信小程序开发教程】
• ⚽ 【JavaScript随手笔记】
• 【大数据学习笔记（华为云）】
• 【程序错误解决方法（建议收藏）】
• 【软件安装教程】

订阅更多，你们将会看到更多的优质内容！！