自定义组件 - 纯数据字段

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