Vue的v-model的原理和实现

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

v-model作为双向绑定指令也是vue两个核心功能之一，使用非常方便，提高前端开发效率，在view层，model层相互需要数据交互，即可使用v-model

v-model的原理:

v-model主要实现了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层数值变化

1.input 输入值后更新data

首先在页面初始化时，vue编译器会编译该html模板文件，将d页面上的dom元素遍历生成一个虚拟的dom树再递归虚拟dom的每一个节点，当匹配到的是一个元素而非纯文本，则继续遍历每个属性，如果遍历到v-model这个属性，则会为这个节点添加一个input书简，当监听从页面输入值的时候，来更新vue实例中data相对应的属性值

2.data属性赋值后更新input值

同样初始化vue实例的时候，会遍历data的每一个属性，并通过defineProperty来监听每一个属性的get和set方法，从而一旦某个属性重新赋值，则能监听到变化来操作响应的页面控制

总结：

        其核心就是，一方面model层通过defineProperty来劫持每个属性，一旦检测到变化，通过相应的页面元素更新

        另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时的更新相关data属性值

v-model的实现：

  <input placeholder="请输入电话" id="username" />
  <p id="uName">显示值</p>

let obj ={}
Objec.defineProperty(obj,'username',{
    get:function(){
        console.log('取值')
    }
    set:function(val){
        console.log('设置值')
        document.getElementById('uName').innerText=val
    }
})
document.getElementById('username').addEventListener('keyup',function(){
    obj.username=event.target.value
})