自定义组件 - 纯数据字段

   1、什么是纯数据字段

1. 概念：纯数据字段指的是那些不用于界面渲染的 data 字段。
2. 应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

好处：纯数据字段有助于提升页面更新的性能。

  options:{
    pureDataPattern:/^_/
  },

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
      _rgbValue:{
        r:0,
        g:0,
        b:0
      },
      funllColor:'0,0,0'
 },

 2、使用规则

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

代码如 👇

options:{
  pureDataPattern:/^_/
},

/**
 * 组件的属性列表
 */
properties: {

},

/**
 * 组件的初始数据
 */
data: {
    _rgbValue:{
      r:0,
      g:0,
      b:0
    },
    funllColor:'0,0,0'
},

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

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

自定义组件 - 组件的生命周期

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

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

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

在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached 。它们各自的特点

如下：

① 组件实例刚被创建好的时候，created 生命周期函数会被触发

此时还不能调用 setData

通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

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

此时， this.data 已被初始化完毕

这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

③ 在组件离开页面节点树后， detached 生命周期函数会被触发

退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数

此时适合做一些清理性质的工作

3、lifetimes 节点

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

代码如 👇

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

最后

下篇文章再见ヾ(￣▽￣)Bye_Bye