有關(guān)雙向數(shù)據(jù)綁定的原理

最近兩次面試的時候，被問到了vue中雙向數(shù)據(jù)綁定的原理，因為初學不精，只是使用而沒有深入研究，所以答不出來。之后就在網(wǎng)上查找了別人寫的博客，學習一下。

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

文章鏈接：vue的雙向綁定原理及實現(xiàn)
Mozilla 開發(fā)者服務(wù)：Object.defineProperty()

因為內(nèi)容比較長，就不轉(zhuǎn)載了，只貼個連接在這里，有興趣的可以直接點擊鏈接訪問。

這里簡單說一下個人的理解。

vue實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和設(shè)置屬性值(set)的操作來實現(xiàn)的。

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

它接收三個參數(shù)，要操作的對象，要定義或修改的對象屬性名，屬性描述符。重點就是最后的屬性描述符。

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

然后我們可以通過在存取描述符中的get和set方法內(nèi)寫入自定義的邏輯來實現(xiàn)對象獲取屬性和設(shè)置屬性時的行為。

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的值已發(fā)生改變，目前的值是：${keyValue}`);} });obj.key; // 1obj.key = 'obj對象的key屬性已經(jīng)綁定了變量keyValue的值'; // keyValue的值已發(fā)生改變，目前的值是：obj對象的key屬性已經(jīng)綁定了變量keyValue的值 // "obj對象的key屬性已經(jīng)綁定了變量keyValue的值"keyValue; // "obj對象的key屬性已經(jīng)綁定了變量keyValue的值"

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

對象obj獲取屬性key的值時，會觸發(fā)上面的get方法，得到的是變量keyValue的值，然后當重新設(shè)置key的值時，觸發(fā)set方法，會將變量keyValue的值改變?yōu)樵O(shè)置的值，如此就實現(xiàn)了一個簡單的雙向綁定：改變keyValue，obj.key得到的值也會改變，重新設(shè)置obj.key，keyValue一樣會隨之改變。

當然，vue的雙向綁定實際更復(fù)雜，但最基本的原理就是基于Object.defineProperty()方法改變數(shù)據(jù)存取的默認行為來實現(xiàn)的。

轉(zhuǎn)載于:https://www.cnblogs.com/wayowe/p/7779557.html

總結(jié)

以上是生活随笔為你收集整理的vue双向数据绑定的原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。