vue入门学习篇——数据双向绑定原理及简单实现

vue数据双向绑定原理

　　vue双向绑定的原理是通过Object.defineProperty()劫持数据结合发布者-订阅者模式的方式来实现的。

Object.defineProperty()

　　Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

 

　语法：Object.defineProperty(obj,prop,descriptor);

　　　　obj: 要在其上定义属性的对象。

　　　　prop: 要定义或修改的属性的名称。

　　　　descriptor: 将被定义或修改的属性描述符。

 

　　这里用到了Object.defineProperty()的get和set方法。

　　get:当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。

　　set:当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

具体用法请浏览此处

 简单实现

 

<input type="text" id="model" />
<div id="modelText"></div>

    let modelInfo = {};
    let defaultValue = 'Hello Object.defineProperty';
    let model = document.getElementById('model');
    let text = document.getElementById('modelText');
    model.value = defaultValue;
    text.innerText = defaultValue;
    /**
     * writable属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。默认为false。
     * value属性对应的值,可以使任意类型的值，默认为undefined
     * configuable是否可以删除目标属性或是否可以再次修改属性的特性（writable, configurable, enumerable）。设置为true可以被删除或可以重新设置特性；设置为false，不能被可以被删除或不可以重新设置特性。默认为false。
     * enumerable此属性是否可以被枚举（使用for...in或Object.keys()）。设置为true可以被枚举；设置为false，不能被枚举。默认为false。
     */
    Object.defineProperty(modelInfo,'key',{
        get(){
            return defaultValue;
        },
        set(value){
            defaultValue = value;
            model.value = value;
            text.innerText = value;
        }
    });
    model.addEventListener('input',function(){
        modelInfo.key = this.value;
    });

 

如果想要深入了解，建议看vue的双向绑定原理及实现。