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的雙向綁定原理及實現。