1.首先解释一下什么是数据的双向绑定：
在vue中，视图和数据是可以同步更新的，当用户操作了视图中的数据之后可以直接更新到data，反过来，data变化之后也可以更新到视图。这大大解放了前端同学的双手，例如：遇到input输入框的值变化后，获取用户输入的值并赋值给某个变量时，再也不需要去手动操作dom元素，这个问题交给Object.defineproperty就好啦。
2.Object.defineproperty是干什么的？Object.defineproperty的API
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法：Object.defineProperty(obj,prop,descriptor)
参数：obj 要在其上定义属性的对象；prop 要定义或修改的属性的名称；descriptor 将被定义或修改的属性描述符。
利用descriptor参数对象中的存取描述符get和set 可以在obj的某个属性被取值和赋值时，添加回调函数，在此劫取数据去做我们想要的处理
3.手动实现input输入框内容改变 同步至 data，data改变同步至input框
废话不多讲了直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>defineProperty数据双向绑定</title>
</head>
<body>
<input type="text" id="input"/>
</body>
<script>
let data = {};
let input = document.querySelector('#input')
Object.defineProperty(data,"test",{
get: function (value) {
console.log("取值",value)
},
set: function(value){
console.log("赋值",value)
input.value = value
return value
}
})
data.test = "123"
input.addEventListener('change', (e) => {
data.test = e.target.value
})
</script>
</html>
这只是一个很基本的数据双向绑定，当需要监听的data数据比较复杂时，例如data的某个属性值是对象或者数组的情况，这个例子就不适用了，请等待后续更新...
