溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
眾所周知，Vue中，可以使用監聽屬性 watch來觀察和響應 Vue 實例上的數據變化，那么小程序能不能實現這一點呢？
監聽器的原理，是將data中需監聽的數據寫在watch對象中，并給其提供一個方法，當被監聽的數據的值改變時，調用該方法。
我們需要用到Javascript中的Object.defineProperty()方法，來手動劫持對象的getter/setter，從而實現給對象賦值時(調用setter)，執行watch對象中相對應的函數，達到監聽效果。
Object.defineProperty()方法，會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 并返回這個對象。
這里假定有多個頁面需要監聽需求，把監聽方法寫在app.js中，以便全局調用
onLaunch: function () {},
// 設置監聽器
watch: function (ctx, obj) {
Object.keys(obj).forEach(key => {
this.observer(ctx.data, key, ctx.data[key], function (value) {
obj[key].call(ctx, value)
})
})
},
// 監聽屬性，并執行監聽函數
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
},
})
}
然后，在需要監聽的頁面onLoad中，調用watch方法（其中test是要監聽的數據，當test在其他方法中通過this.setData賦值后，watch就能監聽到test的變化了）
const app = getApp()
Page({
data: {
test: 0
},
onLoad: function () {
// 調用監聽器，監聽數據變化
app.watch(this, {
test: function (newVal) {
console.log(newVal)
}
})
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
