new Proxy()简单实现vue3双向数据绑定

//html
<input type="text" id="inputTxt" />

//js
		window.onload =()=>{
			let t = {value: 111};
			let inputTxt  = document.getElementById("inputTxt");
			
			let obj = new Proxy(t, {
				get(target, key,  receive){
					console.log('get========')
					console.log(target, key)
					console.log('receive==111====',receive)
					return target[key]; //直接返回对应的值
				},
				set(target, key, newVal, receive){
					console.log('set========')
					console.log(target, key)
					console.log('receive===222=====',receive)
					// target[key] = newVal;
					Reflect.set(target, key, newVal); //对数据值进行更新
					inputTxt.value = newVal;
				}
			})
			//1、数据赋值，更改视图显示
			obj.value = "5555"
			console.log('obj.value=====',obj.value)
			//2、视图更新，更改数据值
			inputTxt.addEventListener("keyup",(e)=>{
				obj.value = e.target.value;
				console.log('==keyup=====', obj)
			})
		}