您好,登錄后才能下訂單哦!
眾所周知,Vue中,可以使用監(jiān)聽屬性 watch來觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變化,那么小程序能不能實現(xiàn)這一點呢?
監(jiān)聽器的原理,是將data中需監(jiān)聽的數(shù)據(jù)寫在watch對象中,并給其提供一個方法,當(dāng)被監(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ù),當(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) } }) }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。