vue框架 v-model 的实现原理

v-model 的实现原理

看过vue官方文档的都知道 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
简单点来说就是表单 input 加 value 的语法糖

下面代码将通过简单的代码解析 v-model 的实现

 
  表单项：

var int = document.querySelector('input') ;
    var obj = {
        name:""
    };
    Object.defineProperty(obj,"name",{
        //数据拦截
        set: function (val) {
            value = val;
            int.value = val;
        }
    });
    int.oninput= function(){
        obj.name = this.value;
    }

不同的表单项对应不同的语法糖，你们可以自己去尝试一下其他表单元素的数据拦截