基于数据双向绑定底层原理 使用Object 数据使用监听输入框使用

一、实现数据双向绑定 底层原理实现 输入框

1.使用Object.defineProperty实现

<input  id="inputNode" type="text" oninput="inputEvt()"/>
<h1 id="showNode"></h1>
<script>
var obj={
   name:''
}
console.log('obj',obj)
Object.defineProperty(obj,'name',{
   set(v){
   console.log('v',v)
   showNode.innerText = '新值: ' + v
},
   get(){
  return showNode.innerText
  console.log('obj.name',obj.name)
}
})
function inputEvt(){
   var e=window.event
   obj.name = e.target.value
}
//整体实现代码
// obj数据+Object属性监听+oninput事件返回值
</script>

 2.输入框输入就会展示数据