什么是纯数据字段:
概念:纯数据字段指的是那些不用于界面渲染的data字段
应用场景:;例如某些情况下,某些data中的字段既不会展示在界面上,也不会传递给其他组件,仅在当前组件内部使用,带有这种特性的data字段适合被设置为纯数据字段
好处:纯数据字段有助于提升页面更新的性能
使用规则:
在Component构造器的options节点中,指定pureDataPatten为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:
// components/numsAdd/numsAdd.js
Component({
options: {
// 指定所有以_开头的数据字段为纯数据字段
pureDataPattern: /^_/
},
/**
* 组件的初始数据
*/
data: {
a:true,
_b:true,
}
}
使用纯数据字段改造数据监听器案例:
Component({
options: {
// 指定所有以_开头的数据字段为纯数据字段
pureDataPattern: /^_/
},
data: {
_rgb: {
r: 0,
g: 0,
b: 0,
},
fullColor: '0,0,0' //根据rgb对象的三个属性,动态计算fullColor的值
},
})
案例完整代码:
WXML:
<nums></nums>
组件的WXML:
<view class="randomColor" style="background-color: rgb({{fullColor}});"></view>
<text>
{{rgb.r}},{{rgb.g}},{{rgb.b}}
当前RGB值:{{fullColor}}
</text>
<button size="mini" type="primary" bindtap="rAdd">R+1</button>
<button size="mini" type="primary" bindtap="gAdd">G+1</button>
<button size="mini" type="primary" bindtap="bAdd">B+1</button>
组件的css:
.randomColor {
display: flex;
justify-content: center;
width: 100%;
height: 200rpx;
}
组件的.js:
// components/numsAdd/numsAdd.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
options: {
// 指定所有以_开头的数据字段为纯数据字段
pureDataPattern: /^_/
},
/**
* 组件的初始数据
*/
data: {
_rgb: {
r: 0,
g: 0,
b: 0,
},
fullColor: '0,0,0' //根据rgb对象的三个属性,动态计算fullColor的值
},
/**
* 组件的方法列表
*/
methods: {
rAdd() {
this.setData({
'_rgb.r': this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5
})
},
gAdd() {
this.setData({
'_rgb.g': this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5
})
},
bAdd() {
this.setData({
'_rgb.b': this.data._rgb.b + 5 > 255 ? 255 : this.data._rgb.b + 5
})
},
},
// 数据监听节点
observers: {
'_rgb.**': function (obj) {
this.setData({
fullColor: `${obj.r},${obj.g},${obj.b}`
})
}
// '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){}
// 对象触发此监听器的三种情况:
// [为属性A赋值]使用setData设置this.data.对象.属性A 时触发
// [为属性B赋值]使用setData设置this.data.对象.属性B 时触发
// [直接为对象赋值]使用setData设置this.data.对象 时触发
},
})
运行,圈起来的才是这部分的代码: