用Proxy手写vue响应式

html

style{
	body{
		color:red;
		font-size:30px;
		text-align:center;
		line-height:100px;
	}
}

js部分

<script>
//收集副作用函数
let arrF = new Set();
let obj ={
	a:“原来的值*****"
}
//副作用函数 渲染
function renderF(){
 document.body.innerText = objProxy.a;
}
//响应式
let objProxy = new Proxy(obj,{
		get(target, key) {
		 	//get时收集依赖
		 	arrF.add(renderF);
		 	return target[key];
		 },
		set(target, key,newVal) {
			//set时触发更新
			target[key] = newVal;
			arrF.forEach(fn => fn());
			return true;
		}
	})
		renderF();
		setTimeout(function () {
			objProxy.a ="修改后的值---}，
		}2000)
</script>