v-model的底层原理

1. 原理分析

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，

也会在更新data绑定属性时候，更新页面上输入控件的值

v-model的实现原理大致是，通过Object.defineProperty()方法来劫持Vue数据的属性，一旦监听

到数据变化，则更新数据关联的虚拟DOM树，当然在模版编译的时候，为指令v-model绑定input

事件，当输入的内容发生改变时，同步更新data中绑定的数据

2. 实现

我们可以通过给input框绑定一个input事件来模拟实现数据的双向绑定的效果

<div id="app">
 <div>{{msg}}</div>
 <input type="text" v-on:input="change" :value="msg"/>
</div>
<script>
new Vue({
 el:'#app',
 data:{
  msg:"hello js",
},
 methods:{
  change(e){
   this.msg = e.target.value;
 }
}
})
</script>