使用Proxy实现一个简单的双向绑定

html代码

1. 首先获取到我们需要的两个dom元素

const inputObj=document.getElementById('input')
const txtObj=document.getElementById('txt')

2. 初始化代理对象

let obj={}

3. 代理选项

let handler={
get(target,key){
    return Reflect.get(target,key)
},
set(target,key,value){
    if(key==='text'){
        inputObj.value=inputObj.value===value?inputObj.value:value;
        txtObj.innerHTML=value
        }
     return Reflect.set(target,key,value)
    }
}
let objProxy=new Proxy(obj,handler)

4.input绑定键盘键入事件

inputObj.addEventListener('keyup',(e=>{
    objProxy.text=e.target.value
}))