有關雙向資料繫結的原理

最近兩次面試的時候，被問到了vue中雙向資料繫結的原理，因為初學不精，只是使用而沒有深入研究，所以答不出來。之後就在網上查找了別人寫的部落格，學習一下。

下面是部落格園一篇部落格，以及MDN上講解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()方法改變資料存取的預設行為來實現的。