Object.defineProperty 给每个属性添加get、set方法,监听数据的变化
Class Observer {
constructor(data) {
this.observer(data);
}
observer(data) {
if (data && typeof data === 'object') {
for (let key in data) {
this.defineReactive(data, key, obj[key]);
}
}
}
defineReactive(obj, key, value) {
this.observer(value);
Object.defineProperty(obj, key, {
get: () => {
return value;
},
set: (newValue) => {
if (newValue !== value) {
this.observer(newValue);
value = newValue;
console.log('监听到数据变化,需要更新UI');
}
}
})
}
}
let obj = { name: 'Tom' };
new Observer(obj);