微信小程式自定義watch監聽方法
阿新 • • 發佈:2022-03-14
// 監聽函式 const 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 observe(nowData, lastKey, watchFun, deep, page); // 監聽nowData物件的lastKey } // 監聽屬性 並執行監聽函式 function 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); // 遞迴呼叫監聽函式 } } 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) { // 若是深度監聽,重新監聽該物件,以便監聽其屬性。 observe(obj, key, watchFun, deep, page); } }, get: function () { return val; } }) } }
頁面初始化引入方法:
import { setWatcher } from '../../utils/util' // 引入監聽 Page({ data: { val: '' }, // 使用監聽 watch: { val: { handler(now ,old){ console.log('我監聽了') }, deep: true } }, onLoad: () => { setWatcher(this) // 註冊監聽 } })