使用es6的proxy来模拟下vue的数据双向绑定

vue2.*使用的是object.definedProperty()数据劫持 加 观察者模式实现的。
随着vue3.0离我们越来越近的,前不久又看了尤大神的直播,对vue3.0的重写,感觉要加大学习成本了哈。
es6也出来四五年了，看完vue3.0感觉自己本来就很菜了，哎此处略去很多字。
还是好好学习,增强自己的知识面才是王道。
之前用以前的老方法 实现过 双向绑定 现在使用proxy来简单模拟下吧

<input type="text">
<br>
<p>111</p>
<button id="b1">点我修改p标签中的内容</button>

<script>
	b1.onclick=function(){
		obj.msg="hello world"
	}
	// proxy
	var target={
		msg:"hello world"
	}
	var handler={
		get:function(target){
			return target.msg;
		},
		set:function(target,property,value){
			target[property]=value;
			document.querySelector('input').value=target[property];
			document.querySelector('p').innerText=target[property]
			
		}
	}
	var obj=new Proxy(target,handler);
	document.querySelector('input').addEventListener('keyup',function(e){
		obj.msg=e.target.value;
	})
</script>

建议想提前入坑 vue3.0的童鞋 最好 提前熟悉 Proxy和Reflect和Set和Map数据结构