class Observer {
constructor(data) {
this.observer(data);
}
observer(data) {
// data 原有属性改成get set
if (!data || typeof data !== 'object') {
return;
}
// 要将数据 一一劫持 先获取到data的key和value
Object.keys(data).forEach(key => {
this.defineReactive(data, key, data[key]);
this.observer(data[key]); // 深度递归劫持
})
}
// 定义响应式
defineReactive(obj, key, value) {
let that = this;
Object.defineProperty(obj, key, {
enumerable: true, // 可枚举
configurable: true,
get() {
return value;
},
set(newValue) {
if (newValue != value) {
// this 不是实例
that.observer(newValue); // 如果是对象继续劫持
value = newValue;
}
}
})
}
VUE 数据劫持 Observer
最新推荐文章于 2022-07-15 17:20:50 发布