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