小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解
眾所周知，Vue中，可以使用監(jiān)聽屬性 watch來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變化，那么小程序能不能實(shí)現(xiàn)這一點(diǎn)呢？
監(jiān)聽器的原理，是將data中需監(jiān)聽的數(shù)據(jù)寫在watch對(duì)象中，并給其提供一個(gè)方法，當(dāng)被監(jiān)聽的數(shù)據(jù)的值改變時(shí)，調(diào)用該方法。
我們需要用到Javascript中的Object.defineProperty()方法，來手動(dòng)劫持對(duì)象的getter/setter，從而實(shí)現(xiàn)給對(duì)象賦值時(shí)(調(diào)用setter)，執(zhí)行watch對(duì)象中相對(duì)應(yīng)的函數(shù)，達(dá)到監(jiān)聽效果。
Object.defineProperty()方法，會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性， 并返回這個(gè)對(duì)象。
這里假定有多個(gè)頁面需要監(jiān)聽需求，把監(jiān)聽方法寫在app.js中，以便全局調(diào)用
onLaunch: function () {},
// 設(shè)置監(jiān)聽器
watch: function (ctx, obj) {
Object.keys(obj).forEach(key => {
this.observer(ctx.data, key, ctx.data[key], function (value) {
obj[key].call(ctx, value)
})
})
},
// 監(jiān)聽屬性，并執(zhí)行監(jiān)聽函數(shù)
observer: function (data, key, val, fn) {
Object.defineProperty(data, key, {
configurable: true,
enumerable: true,
get: function () {
return val
},
set: function (newVal) {
if (newVal === val) return
fn && fn(newVal)
val = newVal
},
})
}
然后，在需要監(jiān)聽的頁面onLoad中，調(diào)用watch方法（其中test是要監(jiān)聽的數(shù)據(jù)，當(dāng)test在其他方法中通過this.setData賦值后，watch就能監(jiān)聽到test的變化了）
const app = getApp()
Page({
data: {
test: 0
},
onLoad: function () {
// 調(diào)用監(jiān)聽器，監(jiān)聽數(shù)據(jù)變化
app.watch(this, {
test: function (newVal) {
console.log(newVal)
}
})
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文整理了一些常用的web打印及局部打印的方法以備不時(shí)之需，感興趣的朋友可以學(xué)習(xí)下2013-05-05
用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼
下面小編就為大家?guī)硪黄迷鶭S對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要給大家介紹了關(guān)于Three.js中矩陣和向量使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解
由于業(yè)務(wù)需要，要求實(shí)現(xiàn)樹形菜單，且菜單數(shù)據(jù)由后臺(tái)返回，下面這篇文章主要給大家介紹了關(guān)于js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2021-05-05
javascript驗(yàn)證完全方法具體實(shí)現(xiàn)
下面這段代碼完全實(shí)現(xiàn)了判斷是否合格.傳入號(hào)碼就行了,包括了算法,下面的是用Ext實(shí)現(xiàn)的,但是基于javascript的語法居多,基本都可以用2013-11-11
javascript實(shí)現(xiàn)的閉包簡(jiǎn)單實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的閉包簡(jiǎn)單實(shí)現(xiàn)方法,涉及javascript閉包的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁功能實(shí)例代碼
這篇文章主要介紹了Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁功能實(shí)例代碼,需要的朋友可以參考下2017-07-07
JavaScript實(shí)現(xiàn)單鏈表過程解析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)單鏈表過程，鏈表中的元素在內(nèi)存中不必是連續(xù)的空間。鏈表的每個(gè)元素有一個(gè)存儲(chǔ)元素本身的節(jié)點(diǎn)和指向下一個(gè)元素的引用。下面請(qǐng)和小編一起進(jìn)入文章了解更多的詳細(xì)內(nèi)容吧2021-12-12
JavaScript實(shí)現(xiàn)AOP詳解(面向切面編程,裝飾者模式)
下面小編就為大家分享一篇JavaScript實(shí)現(xiàn)AOP的方法(面向切面編程,裝飾者模式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
Javascript做面向?qū)ο箝_發(fā)的時(shí)候，總是會(huì)用到很多模擬面向?qū)ο筇匦缘姆椒?，這些方法就構(gòu)成了支撐面向?qū)ο驤avascript的核心代碼2012-05-05