什么是双向数据绑定？

即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。（vue）提供了v-model指令，主要来辅助开发这在(不操作DOM)的前提下，快速获取表单的数据。

一、v-model的特性

可以给变量赋值
会自主创建一个input事件动态的获取变量
默认会给元素创建一个value属性赋值

二、原生实现双向数据绑定

1.Object.defineProperty()

Object.defineProperty() : 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
语法:
Object.defineProperty( obj , prop , descriptor )
参数:
obj
要定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
要定义或修改的属性描述符。

html结构

<body>

  要修改的值<input type="text" name="" id="myp" >

</body>

2.实现代码

<script>
  // 定义变量
  let data= {
    msg:'双向数据绑定'
  }
  let vm = {}
  // 2.当vm的值发生改变 会调用
    Object.defineProperty(vm,'msg',{
  set(val){ // val是刚才给msg更改的值
    // 当vm里的msg更改的时候就触发set事件
    data.msg=val // 把数据回传给data   不是回传给msg  否则会出现递归
    document.getElementById('myp').value = val
    console.log(vm.msg);
  },
  get(){
    // 当要调用  msg的值的时候，获取到的值就是，从data里面拿到的值
    return data.msg
    // vm.msg=data.msg'里的值'
  }
})
document.getElementById('myp'),addEventListener('input',function (e) {
  // 把input标签里的值赋值给vm.msg 让他调用Objet.defineProperty方法
vm.msg =e.target.value // 把试图赋值给vue的变量
}) 
vm.msg = data.msg // 1.先默认执行一次事件，让他给input标签赋值
</script>

总结

希望总结的对各位小伙伴有所帮助，还有不足的地方请及时评论，感谢观赏。