微信小程序數(shù)據(jù)監(jiān)聽(tīng)器使用實(shí)例詳解
一、數(shù)據(jù)監(jiān)聽(tīng)器
1.1 什么是數(shù)據(jù)監(jiān)聽(tīng)器
數(shù)據(jù)監(jiān)聽(tīng)器用于 監(jiān)聽(tīng)和響應(yīng)任何屬性和數(shù)據(jù)字段的變化,從而執(zhí)行特定的操作 。它的作用類似于 vue 中
的 watch 偵聽(tīng)器。在小程序組件中,
在componets中新建一個(gè)test2文件夾在文件夾里新建component
在app.json usingComponents中 添加組件目錄:
數(shù)據(jù)監(jiān)聽(tīng)器的基本語(yǔ)法格式如下:
1.2 數(shù)據(jù)監(jiān)聽(tīng)器的基本用法
"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({ /** * 組件的初始數(shù)據(jù) */ data: { n1:0, n2:0, sum: }, /** * 組件的方法列表 */ methods: { addN1(){ this.setData({ n1:this.data.n1 + 1 }) }, addN2() { this.setData({ n2:this.data.n2 + 1 }) } }, // 數(shù)據(jù)監(jiān)聽(tīng)節(jié)點(diǎn) observers:{ 'n1,n2':function(new1,new2){ //監(jiān)聽(tīng) n1 和 n2數(shù)據(jù)的變化 this.setData({ // 通過(guò)監(jiān)聽(tīng)器,自動(dòng)計(jì)算sum的值 sum: new1 + new }) } } })
1.3 監(jiān)聽(tīng)對(duì)象屬性的變化
數(shù)據(jù)監(jiān)聽(tīng)器支持監(jiān)聽(tīng)對(duì)象中 單個(gè) 或 多個(gè)屬性 的變化,示例語(yǔ)法如下:
二、數(shù)據(jù)監(jiān)聽(tīng)器
在componets中新建一個(gè)test3文件夾在文件夾里新建component
在app.json usingComponents中 添加組件目錄:
Compoent({ observers:{ '對(duì)象.屬性A,對(duì)象.屬性B':function(屬性A的新值,屬性B的新值){ // 觸發(fā)此監(jiān)聽(tīng)器的 3 種情況 // [為屬性A賦值]使用 setData 設(shè)置this.data.對(duì)象.屬性A 時(shí)觸發(fā) // [為屬性B賦值] 使用setData 設(shè)置 this.data.對(duì)象.屬性B 時(shí)觸發(fā) // [直接為對(duì)象賦值] 使用setData 設(shè)置this.data對(duì)象 時(shí)觸發(fā) // do something } } })
.wxml 結(jié)構(gòu) .wxss 樣式
"usingComponents": { "my-test1":"/components/test/test", "my-test2":"/components/test2/test2", "my-test3":"/components/test3/test3" }
// components/test3/test3.js Component({ /** * 組件的初始數(shù)據(jù) */ data: { rgb:{ // rgb 的顏色值對(duì)象 r:0, g:0, b: }, fullColor: '0, 0, 0' //根據(jù)rgb對(duì)象的三個(gè)屬性,動(dòng)態(tài)計(jì)算fullColor 的值 }, })
<!--components/test3/test3.wxml--> <view style="background-color:rgb({{fullColor}});"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 監(jiān)聽(tīng)對(duì)象中指定屬性的變化
// components/test3/test3.js Component({ /** * 組件的方法列表 */ methods: { changeR(){ //修改 rgb 對(duì)象上 r屬性的值 this.setData({ 'rgb.r':this.data.rgb.r + 5 > 255? 255 : this.data.rgb.r + 5 }) }, changeG(){ // 修改rgb對(duì)象上r屬性的值 this.setData({ 'rgb.g':this.data.rgb.g + 5 >255 ?255 :this.data.rgb.g + }) }, changeB(){//修改 rgb對(duì)象上b屬性的值 this.setData({ 'rgb.b':this.data.rgb.b + 5 > 255? 255 :this.data.rgb.b + }) } } })
2.2 監(jiān)聽(tīng)對(duì)象中所有屬性的變化
如果某個(gè)對(duì)象中需要被監(jiān)聽(tīng)的屬性太多,為了方便,可以使用 通配符 ** 來(lái) 監(jiān)聽(tīng) 對(duì)象 中所有屬性的變化,代碼結(jié)構(gòu)如下
observers:{ // 監(jiān)聽(tīng)rgb 對(duì)象上 r,g,b 三個(gè)屬性的變化 'rgb.r,rgb.g, rgb.b':function(r,g,b){ this.setData({ //為data中的fullColor 重新賦值 fullColor:`${r},${g},$` }) } }
observers:{ // 監(jiān)聽(tīng)rgb 對(duì)象上 所有屬性的變化 'rgb.**':function(obj){ this.setData({ fullColor:`${obj.r},${obj.g},${obj.b}` }) } }
三、純數(shù)據(jù)字段
3.1 什么是純數(shù)據(jù)字段
概念: 純數(shù)據(jù)字段 指的是那些 不用于界面渲染的 data 字段。
應(yīng)用場(chǎng)景:例如有些情況下,某些 data 中的字段 既不會(huì)展示在界面上,也不會(huì)傳遞給其他組件 ,僅僅在當(dāng)前組件內(nèi)部使用。帶有這種特性的 data 字段適合被設(shè)置為純數(shù)據(jù)字段。
優(yōu)點(diǎn):純數(shù)據(jù)字段 有助于提升頁(yè)面更新的性能。
3.2 使用規(guī)則
在 Component 構(gòu)造器的 options 節(jié)點(diǎn)中,指定 pureDataPattern 為一個(gè) 正則表達(dá)式 ,字段名符合這個(gè)正則表達(dá)式的字段將成為純數(shù)據(jù)字段,示例代碼如下:
3.3 使用純數(shù)據(jù)字段改造數(shù)據(jù)監(jiān)聽(tīng)器
Component({ options: { // 指定所有 _ 開(kāi)頭的數(shù)據(jù)字段為純數(shù)據(jù)字段 pureDataPattern:/^_/ }, data: { a:true, // 普通數(shù)據(jù)字段 _b:true, // 純數(shù)據(jù)字段 } } })
// components/test3/test3.js Component({ options:{ // 指定所有_ 開(kāi)頭的數(shù)據(jù)字段為純數(shù)據(jù)字段 pureDataPattern:/^_/ }
到此這篇關(guān)于微信小程序數(shù)據(jù)監(jiān)聽(tīng)器使用實(shí)例詳解的文章就介紹到這了,更多相關(guān)小程序數(shù)據(jù)監(jiān)聽(tīng)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼,小程序本身對(duì)http、websocket等連接均有諸多限制,所以這次項(xiàng)目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02Javascript實(shí)現(xiàn)圖片懶加載插件的方法
最近由于公司項(xiàng)目需要,要利用Javascript實(shí)現(xiàn)圖片懶加載效果,嘗試起來(lái)發(fā)現(xiàn)并不難,于是將自己的實(shí)現(xiàn)過(guò)程分享出來(lái)給大家學(xué)習(xí)和參考,希望對(duì)有需要的朋友們帶來(lái)一定的幫助,感興趣的朋友們下面來(lái)一起看看吧。2016-10-10javascript 判斷當(dāng)前瀏覽器版本并判斷ie版本
這篇文章主要介紹了javascript 判斷當(dāng)前瀏覽器版本并判斷ie版本的相關(guān)資料,需要的朋友可以參考下2017-02-02JS實(shí)現(xiàn)的仿淘寶交易倒計(jì)時(shí)效果
這篇文章主要介紹了JS實(shí)現(xiàn)的仿淘寶交易倒計(jì)時(shí)效果,涉及JavaScript針對(duì)時(shí)間與日期的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11TypeScript中的類型運(yùn)算符實(shí)現(xiàn)
TypeScript 是一種強(qiáng)類型語(yǔ)言,它通過(guò)使用類型運(yùn)算符來(lái)強(qiáng)化類型安全性,本文主要介紹了TypeScript中的類型運(yùn)算符實(shí)現(xiàn),感興趣的可以了解一下2023-10-10jquery ajax應(yīng)用中iframe自適應(yīng)高度問(wèn)題解決方法
很多管理系統(tǒng)中,都使用iframe進(jìn)行信息內(nèi)容的展示方式,或者作為主菜單的鏈接展示內(nèi)容。使用iframe的問(wèn)題就是自適應(yīng)高度的問(wèn)題2014-04-04深入理解JavaScript系列(2) 揭秘命名函數(shù)表達(dá)式
網(wǎng)上還沒(méi)用發(fā)現(xiàn)有人對(duì)命名函數(shù)表達(dá)式進(jìn)去重復(fù)深入的討論,正因?yàn)槿绱?,網(wǎng)上出現(xiàn)了各種各樣的誤解,本文將從原理和實(shí)踐兩個(gè)方面來(lái)探討JavaScript關(guān)于命名函數(shù)表達(dá)式的優(yōu)缺點(diǎn)2012-01-01Bootstrap按鈕組簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap按鈕組的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03