Vue原理解析之Observer监听数据变化,让每个属性都可以被观测是否改变如何实现的
Sonder
2022-08-14
1189字
3分钟
浏览 (2.2k)
<script type="module">
import { ObserverEvent } from "./ObserverEvent.js";
let obj = new ObserverEvent({
name: '小米',
age: 18
});
console.log(obj.value.name)
</script>
// 监听数据变化,让每个属性都可以被观测是否改变
export class ObserverEvent {
constructor(value) {
this.value = value;
if(Array.isArray(value)) {
// 数组逻辑
} else {
// 对象逻辑
this.walk(value);
}
}
walk(obj) {
// {name: '小米', age: '18'}
const keys = Object.keys(obj);
for(let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i]);
}
}
}
function defineReactive(obj,keys,val) {
if(arguments.length === 2) {
val = obj[keys];
}
if(typeof val === 'object') {
new ObserverEvent(val);
}
Object.defineProperty(obj, keys, {
enumerable: true, // 可枚举
configurable: true, // 可改变
get() {
console.log(`${keys}被读取了`)
return val;
},
set(newKey) {
console.log(`${keys}被修改了,新值是${newKey}}`)
val = newKey;
}
});
}