小編這次要給大家分享的是微信小程序如何實現watch監聽，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
Vue 提供了一種通用的方式來觀察和響應 Vue 實例上的數據變動：監聽屬性 watch。
雖然watch的濫用會導致性能不佳，但在一些情況下我們還是需要watch，使得代碼更加簡潔、邏輯更加清晰(其實就是嫌麻煩...)。
小程序實現 類似vue 一樣的watch 監聽數據
將方法注冊到app.js 中也可以使用高級一點的寫法
使用裝飾器模式將小程序page 重寫掛在到生命周期函數上或者掛在頁面this 上每次就不需要重新在調用初始化一次。本文對裝飾器模式不做介紹這是個思路。等待下次實現
setWatcher(page) {
let data = page.data; // 獲取page 頁面data
let watch = page.watch;
for(let i in watch){
let key = i.split('.'); // 將watch中的屬性以'.'切分成數組
let nowData = data; // 將data賦值給nowData
let lastKey = key[key.length - 1];
let watchFun = watch[i].handler || watch[i]; // 兼容帶handler和不帶handler的兩種寫法
let deep = watch[i].deep; // 若未設置deep,則為undefine
this.observe(nowData, lastKey, watchFun, deep, page); // 監聽nowData對象的lastKey
}
},
/\*\*
\* 監聽屬性 并執行監聽函數
\*/
observe(obj, key, watchFun, deep, page) {
let val = obj[key];
// 判斷deep是true 且 val不能為空 且 typeof val==='object'（數組內數值變化也需要深度監聽）
if (deep && val != null && typeof val === 'object') {
for(let i in val){
this.observe(val, i, watchFun, deep, page); // 遞歸調用監聽函數
}
}
let that = this;
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
set: function (value) {
// 用page對象調用,改變函數內this指向,以便this.data訪問data內的屬性值
watchFun.call(page, value, val); // value是新值，val是舊值
val = value;
if (deep) { // 若是深度監聽,重新監聽該對象，以便監聽其屬性。
that.observe(obj, key, watchFun, deep, page);
}
},
get: function () {
return val;
}
})
}頁面使用：
onLoad: function () {
app.setWatcher(this);
setTimeout(()=>{
this.setData({
name:"kangbosodoa"
})
},2000)
},
watch: {
name: {
handler(newValue,oldvalue) {
console.log(this)
console.log(newValue,oldvalue,"變化了");
},
deep: true
},
type:{
handler(newValue) {
console.log(newValue,"屬性發生變化");
},
deep: true // 是否深度監聽
}
},看完這篇關于微信小程序如何實現watch監聽的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
