js 模拟Vue数据监听(丐版)
vue中对多层对象的处理加了递归,此处为丐版,无递归处理,只能处理一层
let myData = {
name:'睿睿',
age:18
}
let myWatch = new Watch(myData)
let vm = {}
vm._data = data = myWatch;
function Watch (obj) {
//获取对象中的每一个属性
const myKey = Object.keys(obj)
myKey.forEach(key => {
// 此处的this指向构造函数的实例
Object.defineProperty(this,key,{
get () {
return obj[key]
},
set (val) {
console.log(`我的${key}属性被修改成了${val},我监听到了,这个时候我可以去操作一些dom了`)
obj[key] = val
}
})
});
}