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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.