vue实现双向事件绑定v-model代码原理示例

本篇文章小编给大家分享一下vue实现双向事件绑定v-model代码原理示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

与js或者jquery直接改变操作dom不同，vue使用v-model实现数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

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

官方文档这么解释：

v-model只不过是一个语法糖而已,真正的实现靠的还是

v-bind:绑定响应式数据

触发 input 事件 并传递数据 (核心和重点)

如下代码

本质上是

解释：

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

看下方代码：

Object.defineProperty(data,"name",{
        get(){
            return data["name"];
        },
        set(newVal){
            let val=data["name"];
            if (val===newVal){
                return;
            }
            data["name"]=newVal;
            // 监听到了属性值的变化,假如node是其对应的input节点
            node.value=newVal;
        }    
    })

总结

一方面modal层通过Object.defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值

那么Object.defineProperty是用来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set，v-model其实是对其get和set进行重写操作，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数

补充

v-model修饰符：.lazy、.trim和.number

lazy ：在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步

trim ：去除字符串首尾的空格

number ：将数据转化为值类型