微信小程序數據監聽器怎么使用

本文小編為大家詳細介紹“微信小程序數據監聽器怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序數據監聽器怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、數據監聽器

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:/^_/
}

讀到這里，這篇“微信小程序數據監聽器怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。