微信小程序数据监听器怎么使用

发布时间：2023-05-05 15:30:46 作者：iii
来源：亿速云阅读：154

本文小编为大家详细介绍“微信小程序数据监听器怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序数据监听器怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一、数据监听器

1.1 什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中

的 watch 侦听器。在小程序组件中，

在componets中新建一个test2文件夹在文件夹里新建component

在app.json usingComponents中添加组件目录：

数据监听器的基本语法格式如下：

1.2 数据监听器的基本用法

"usingComponents": {
"my-test1":"/components/test/test",
"my-test2":"/components/test2/test2",
},

Component({
observers:{
'字段A,字段B': function(字段A的新值,字段B的新值)
//do something
}
})

组件的 .js 文件

<!--components/test2/test2.wxml-->
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="addN1">n1+1</button>
<button bindtap="addN2">n2+1</button>

// components/test2/test2.js
Component({
/**
* 组件的初始数据
*/
data: {
n1:0,
n2:0,
sum:
},
/**
* 组件的方法列表
*/
methods: {
addN1(){
this.setData({
n1:this.data.n1 + 1
})
},
addN2() {
this.setData({
n2:this.data.n2 + 1
})
}
},
// 数据监听节点
observers:{
'n1,n2':function(new1,new2){ //监听 n1 和 n2数据的变化
this.setData({ // 通过监听器，自动计算sum的值
sum: new1 + new
})
}
}
})

1.3 监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：

二、数据监听器

在componets中新建一个test3文件夹在文件夹里新建component

在app.json usingComponents中添加组件目录：

Compoent({
observers:{
'对象.属性A，对象.属性B'：function(属性A的新值，属性B的新值){
// 触发此监听器的 3 种情况
// [为属性A赋值]使用 setData 设置this.data.对象.属性A 时触发
// [为属性B赋值] 使用setData 设置 this.data.对象.属性B 时触发
// [直接为对象赋值] 使用setData 设置this.data对象 时触发
// do something
}
}
})

.wxml 结构 .wxss 样式

"usingComponents": {
"my-test1":"/components/test/test",
"my-test2":"/components/test2/test2",
"my-test3":"/components/test3/test3"
}

// components/test3/test3.js
Component({
/**
* 组件的初始数据
*/
data: {
rgb:{ // rgb 的颜色值对象
r:0,
g:0,
b:
},
fullColor: '0, 0, 0' //根据rgb对象的三个属性，动态计算fullColor 的值
},
})

<!--components/test3/test3.wxml-->
<view class="colorBox">颜色值：
{{fullColor}}</view>
<button size="mini" type="default" bindtap="changeR">R</button>
<button size="mini" type="primary" bindtap="changeG">G</button>
<button size="mini" type="warn" bindtap="changeB">B</button>
<view>{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>

/* components/test3/test3.wxss */
.colorBox {
line-height: 200rpx;
font-size:24rpx;
color:white;
text-shadow:0rpx 0rpx 2rpx black;
text-align:center;
}

2.1 监听对象中指定属性的变化

// components/test3/test3.js
Component({
/**
* 组件的方法列表
*/
methods: {
changeR(){ //修改 rgb 对象上 r属性的值
this.setData({
'rgb.r':this.data.rgb.r + 5 > 255? 255 : this.data.rgb.r +
5
})
},
changeG(){ // 修改rgb对象上r属性的值
this.setData({
'rgb.g':this.data.rgb.g + 5 >255 ?255 :this.data.rgb.g +
})
},
changeB(){//修改 rgb对象上b属性的值
this.setData({
'rgb.b':this.data.rgb.b + 5 > 255? 255 :this.data.rgb.b +
})
}
}
})

2.2 监听对象中所有属性的变化

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化，代码结构如下

observers:{
// 监听rgb 对象上 r,g,b 三个属性的变化
'rgb.r,rgb.g, rgb.b':function(r,g,b){
this.setData({
//为data中的fullColor 重新赋值
fullColor:`${r},${g},${b}`
})
}
}

observers:{
// 监听rgb 对象上 所有属性的变化
'rgb.**':function(obj){
this.setData({
fullColor:`${obj.r},${obj.g},${obj.b}`
})
}
}

三、纯数据字段

3.1 什么是纯数据字段

概念：纯数据字段指的是那些不用于界面渲染的 data 字段。

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

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

3.2 使用规则

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

3.3 使用纯数据字段改造数据监听器

Component({
options: {
// 指定所有 _ 开头的数据字段为纯数据字段
pureDataPattern:/^_/
},
data: {
a:true, // 普通数据字段
_b:true, // 纯数据字段
}
}
})

// components/test3/test3.js
Component({
options:{
// 指定所有_ 开头的数据字段为纯数据字段
pureDataPattern:/^_/
}

读到这里，这篇“微信小程序数据监听器怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。