目标
在微信小程式實作 watch 屬性,監聽data中的屬性,當被監聽屬性的值改變時,執行我們指定的方法。
思路
Vue 的computed和watch可以很友善的檢測資料的變化,進而做出相應的改變,是以,模仿 vue 肯定是一個不錯的選擇。
與 Vue 一樣,我們使用 ES5 的Object.defineProperty()方法,劫持對象的getter/setter,進而實作給對象指派時(調用 setter),執行 watch 對象中相對應的函數,達到監聽效果。
代碼
不啰嗦,上代碼,真實可用。
function observe(obj, key, watchFun, deep, page) {
let val = obj[key];
if (val != null && typeof val === "object" && deep) {
Object.keys(val).forEach((item) => {
observe(val, item, watchFun, deep, page);
});
}
Object.defineProperty(obj, key, {
configurable: true,
enumerable: true,
set: function(value) {
watchFun.call(page, value, val);
val = value;
if (deep) {
observe(obj, key, watchFun, deep, page);
}
},
get: function() {
return val;
}
});
}
export function setWatcher(page) {
let data = page.data;
let watch = page.watch;
Object.keys(watch).forEach((item) => {
let targetData = data;
let keys = item.split(".");
for (let i = 0; i < keys.length - 1; i++) {
targetData = targetData[keys[i]];
}
let targetKey = keys[keys.length - 1];
let watchFun = watch[item].handler || watch[item];
let deep = watch[item].deep;
observe(targetData, targetKey, watchFun, deep, page);
});
}
注意事項:
- watch 隻能監聽已存在的屬性,數組的
,push()
等方法并不會觸發監聽函數。pop()
使用
import * as watch from "./watch.js";
Page({
data: {
name: "二狗子"
},
onLoad() {
watch.setWatcher(this);
},
watch: {
name: function(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
});
- 首先在需要的頁面引入
- 在 Page 的onLoad鈎子設定監聽器
然後就可以愉快的使用了。
總結
watch 會使代碼更簡潔,邏輯更清晰,在響應式資料處理上很友善。