数组:通过重写数组方法来实现

对象:对象内部通过defineReactive方法,使用Object.defineProperty,将属性进行劫持(只会劫持已存在的属性);每个属性都拥有自己的dep属性,存放他所依赖的watcher,当属性变化后会通知自己对应的watcher去更新。

另外,对象层级过深,性能就会差;不需要响应数据的内容不要放到data中;

let state = {count:0}
let active;

function defineReactive(obj){
	for(let key  in obj){
let value = obj[key];
let dep = [];
Object.defineProperty(obj, key,{
	get(){
if(active){
	dep.push(active)
}
return value;
	},
	set(newValue){
value=newValue;
dep.forEach(watcher=>watcher())
	}
})
	}
	
}

defineReactive(state);

let watcher = (fn)=>{
	active = fn;
	fn();
	active = null;
}

watcher (()=>{
	app.innerHTML = state.count;
})
watcher(()=>{
	console.log(state.count)
})