vue雙向數據綁定的原理

有關雙向數據綁定的原理

最近兩次面試的時候，被問到了vue中雙向數據綁定的原理，由於初學不精，只是使用而沒有深刻研究，因此答不出來。以後就在網上查找了別人寫的博客，學習一下。

下面是博客園一篇博客，以及MDN上講解Object.defineProperty()方法的地址。

文章連接：vue的雙向綁定原理及實現
Mozilla 開發者服務：Object.defineProperty()

由於內容比較長，就不轉載了，只貼個鏈接在這裏，有興趣的能夠直接點擊連接訪問。

這裏簡單說一下我的的理解。

vue實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法從新定義了對象獲取屬性值(get)和設置屬性值(set)的操做來實現的。

在MDN上對該方法的說明是：Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。

它接收三個參數，要操做的對象，要定義或修改的對象屬性名，屬性描述符。重點就是最後的屬性描述符。

屬性描述符是一個對象，主要有兩種形式：數據描述符和存取描述符。這兩種對象只能選擇一種使用，不能混合兩種描述符的屬性同時使用。上面說的get和set就是屬於存取描述符對象的屬性。

而後咱們能夠經過在存取描述符中的get和set方法內寫入自定義的邏輯來實現對象獲取屬性和設置屬性時的行爲。

var keyValue = 1;
var obj = {};
Object.defineProperty(obj,'key', {
    enumerable: true,
    configurable: true,
    get: function(){
        return keyValue;
    },
    set: function(newValue){
        keyValue = newValue;
        console.log(`keyValue的值已發生改變，目前的值是：${keyValue}`);
    }
});

obj.key; // 1

obj.key = 'obj對象的key屬性已經綁定了變量keyValue的值';
// keyValue的值已發生改變，目前的值是：obj對象的key屬性已經綁定了變量keyValue的值
// "obj對象的key屬性已經綁定了變量keyValue的值"

keyValue; // "obj對象的key屬性已經綁定了變量keyValue的值"

上面這個例子就是改變了對象獲取屬性及設置屬性的默認行爲。

對象obj獲取屬性key的值時，會觸發上面的get方法，獲得的是變量keyValue的值，而後當從新設置key的值時，觸發set方法，會將變量keyValue的值改變爲設置的值，如此就實現了一個簡單的雙向綁定：改變keyValue，obj.key獲得的值也會改變，從新設置obj.key，keyValue同樣會隨之改變。

固然，vue的雙向綁定實際更復雜，但最基本的原理就是基於Object.defineProperty()方法改變數據存取的默認行爲來實現的。