vue的双向绑定

双向绑定：
  v-model:	创建双向数据绑定(M<->V) , 用在能生产数据的表单元素
    input/radio/select/.....  绑定的是表单元素的  value值 checked 

单向绑定模拟双向绑定:
  :value="...."   model->view
  v-on:input="fn($event.value)"  输入时把事件对象的value携带到方法，方法修改了model

  <div class="app">

    <h3>v-model双向绑定</h3>

    <input type="text" v-model="iptName">
    {{iptName}}

    <h3>手动实现双向绑定</h3>
    <input type="text" :value="iptName2" @input="changeIptName2">
    {{iptName2}}

  </div>

  <script>
    let vm = new Vue({//配置选项
      el:'.app',
      data:{ 
        iptName:'heheda',
        iptName2:'asdfasdf'
      },
      methods:{
        changeIptName2(ev){
          this.iptName2 = ev.target.value
        }
      }
    })
  </script>

那么双向绑定的原理是什么？
我们先从MVVM了解，MVVM即数据（data）变化更新视图（view），视图（view）变化更新数据（data）
原理就是通过Object.defineProperty() 方法来实现，具体的可参考https://www.cnblogs.com/wangjiachen666/p/9883916.html