小程序使用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)文章
這篇文章主要介紹了JS小技巧之通過字符串追加元素方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
JavaScript入門系列之知識(shí)點(diǎn)總結(jié)
JavaScript 是屬于網(wǎng)絡(luò)的腳本語言。本文是小編日常收集整理些javascript入門基礎(chǔ)知識(shí)，對(duì)js新手朋友非常有幫助，對(duì)js入門知識(shí)點(diǎn)感興趣的朋友一起學(xué)習(xí)吧2016-03-03
基于Bootstrap下拉框插件bootstrap-select使用方法詳解
這篇文章主要為大家詳細(xì)介紹了基于Bootstrap下拉框插件bootstrap-select的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
JS實(shí)現(xiàn)瀏覽器菜單命令...2006-09-09
淺談layer的Icon樣式以及一些常用的layer窗口使用方法
今天小編就為大家分享一篇淺談layer的Icon樣式以及一些常用的layer窗口使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
詳解JavaScript如何準(zhǔn)確獲取任意變量的數(shù)據(jù)類型
js是弱類型語言，或者說是動(dòng)態(tài)語言，在定義變量時(shí)我們可以不提前聲明變量的類型，也可以在變量聲明后賦予不同類型的值。所以本文為大家詳解一下JavaScript如何準(zhǔn)確獲取任意變量的數(shù)據(jù)類型，需要的可以參考一下2022-06-06
JavaScript錯(cuò)誤處理之分析 Uncaught(in promise) error的
在開發(fā)過程中,JavaScript的錯(cuò)誤處理是一個(gè)老生常談的話題,當(dāng)應(yīng)用程序發(fā)生未捕獲的異常時(shí),Uncaught(in promise) error是其中最常見的錯(cuò)誤類型,這篇文章將從多個(gè)方面詳細(xì)闡述這種錯(cuò)誤類型的原因與解決方案,感興趣的朋友一起看看吧2023-12-12
數(shù)組，即Array類型，是開發(fā)中最常用的類型之一。這篇文章主要介紹了淺談Javascript數(shù)組的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。通過本文給大家介紹Javascript的表單驗(yàn)證長(zhǎng)度，需要的朋友參考下吧2016-03-03
js實(shí)現(xiàn)頁面導(dǎo)航層級(jí)指示效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)頁面導(dǎo)航層級(jí)指示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08