web响应式简单实现-依赖收集和派发

<button id="btn">点击添加123</button>
<div id="content"></div>
<script type="module">
	//当前依赖
	let activeEffect = null;
	// 获取proxy代理对象
	function getProxy(obj,effectmap) {
		return new Proxy(obj, {
			get(target, key, receiver) {
				console.log('get', key);
				//收集依赖
				console.log(effectmap);
				//console.log("effectmap",activeEffect);
				if(activeEffect){
					if(!effectmap[key]){
						effectmap[key] =[]
					}
					effectmap[key].push(activeEffect);
					console.log("effectmap=====",effectmap);
				}
				
				return Reflect.get(target, key, receiver);
			},
			set(target, key, value, receiver) {
				console.log('set', key, value);
				//派发更新
				effectmap[key].forEach(fn => {
					fn();
				});
				return Reflect.set(target, key, value, receiver);
			}
		});

	}
	function reative(obj) {
		let effectmap = {}
		return getProxy(obj,effectmap);
	}

	function ref(value){
		return reative({value})
	}
	function effect(fn) {
		activeEffect = fn;
		fn();
		activeEffect = null;
	}
	console.log("-------------------------------")
	const btn = document.getElementById('btn')
	const content = document.getElementById('content')
            //定义代理数据
	const state = reative({
		count: 0
	});
	const nums=ref(1)

	effect(() => {
		content.textContent = state.count+"|";
		content.textContent +=nums.value;
	});
	btn.onclick = () => {
		state.count++
		nums.value+=2
	}

</script>