if (typeof callback === 'function') {
callback(newVal, val);
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
console.log('finish set', newVal);
}
});
}
export function watch(cxt, callbackObj) {
const data = cxt.data
for (const key in data) {
console.log(key);
defineReactive(data, key, callbackObj)
}
}
使用
我们在执行watch回调前没有对新老赋值进行比较，原因是微信当中对data中的变量赋值，即使给引用变量赋值还是相同的值，也会因为引用地址不同，判断不相等。如果想对新老值进行比较就不能使用 === ，可以先对obj或者array转换为json字符串再比较。
//index.js
//获取应用实例
const app = getApp()
import {watch} from '../../utils/watcher';
Page({
data: {
motto: 'hello world',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
tableData: [] },
onLoad: function () {
this.initWatcher();
},
initWatcher () {
watch(this, {
motto(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
}, userInfo(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
},
tableData(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
}
});
},
onClickChangeStringData() {
this.setData({
motto: 'hello'
});
},
onClickChangeObjData() {
this.setData({
userInfo: {
name: 'helo'
}
});
},
onClickChangeArrayDataA() {
const tableData = [];
this.setData({
tableData
});
}
})
参考
如何阅读React源码
React 16.3 ~ React 16.5 一些比较重要的改动
总结
以上所述是小编给大家介绍的React和Vue中监听变量变化的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
