微信小程序，實(shí)現(xiàn) watch 屬性，監(jiān)聽(tīng)數(shù)據(jù)變化
發(fā)布時(shí)間：2019-01-08 09:09 所屬欄目：小程序開(kāi)發(fā)教程
在微信小程序?qū)崿F(xiàn) watch 屬性，監(jiān)聽(tīng) data 中的屬性，當(dāng)被監(jiān)聽(tīng)屬性的值改變時(shí)，執(zhí)行我們指定的方法。??
思路
Vue 的 computed 和 watch 可以很方便的檢測(cè)數(shù)據(jù)的變化，從而做出相應(yīng)的改變，所以，模仿 vue 肯定是一個(gè)不錯(cuò)的選擇。
與 Vue 一樣，我們使用 ES5 的 Object.defineProperty() 方法，劫持對(duì)象的 getter/setter ，從而實(shí)現(xiàn)給對(duì)象賦值時(shí)(調(diào)用 setter)，執(zhí)行 watch 對(duì)象中相對(duì)應(yīng)的函數(shù)，達(dá)到監(jiān)聽(tīng)效果。
代碼
不啰嗦，上代碼，真實(shí)可用。
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);
});
}
|
復(fù)制代碼
注意事項(xiàng)：
watch 只能監(jiān)聽(tīng)已存在的屬性，數(shù)組的 push() ， pop() 等方法并不會(huì)觸發(fā)監(jiān)聽(tīng)函數(shù)。
使用
import * as watch from "./watch.js";
Page({
data: {
name: "二狗子"
},
onLoad() {
watch.setWatcher(this);
},
watch: {
name: function(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
});
|
復(fù)制代碼
首先在需要的頁(yè)面引入
在 Page 的 onLoad 鉤子設(shè)置監(jiān)聽(tīng)器
然后就可以愉快的使用了。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://u-renovate.com/wxmini/doc/course/25072.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)：800182392 點(diǎn)擊咨詢(xún)
