各位朋友好，在一些面試場景，尤其是大廠面試vue的時候，經常提及到一個非常重要的概念，叫做雙向數據綁定。大家其實對于這個問題不會很陌生，vue中采用mvvm的模式，內置vm將view層與model層兩者進行關聯，任何一方的變化都會讓另外一方受到影響。那回答完后，面試官還會繼續追問，請回答一下你理解的雙向數據綁定背后的原理是什么？那今天我們就一起探討一下vue的雙向數據綁定是如何實現的。

　　所謂要實現雙向數據綁定，vue中內部采用了發布-訂閱模式。內部結合了Object.defineProperty這個ES5的新特性(ie8瀏覽器可不支持哦...)，對vue傳入的數據進行了相應的數據攔截，為其動態添加get與set方法。當數據變化的時候，就會觸發對應的set方法，當set方法觸發完成的時候，內部會進一步觸發watcher,當數據改變了，接著進行虛擬dom對比，執行render,后續視圖更新操作完畢。

　　來，直接上圖看一下

　　好，分析完原理后，我們來看下es5這個方法Object.defineProperty有什么用呢？

　　上代碼運行一下：

　　運行的時候，我們不難發現，輸入框里面的內容改變的時候，p標簽里面的值也會對應的得到變化。原因是因為當輸入框的內容發生變化的時候，我們獲取到了輸入框的值，然后將其賦值給object.msg屬性。這樣object的msg屬性的set方法就會被執行，從而將對應的content值進行了改變。

　　那后續當我們去修改數據，視圖會不會自動更新呢？

　　這樣，整了一個定時器，過了2s中，修改了對象的數據，對象數據發生變化，從而又會觸發set方法，實現了響應的數據改變，視圖也會變成了hello-world的值。其實，這就是借助了vue中的Object.defineProperty對于數據的攔截處理的流程。

　　vue 2.x中使用的Object.defineProperty對于數據進行攔截，其實還是有缺陷的，具體如下：

　　1、對象屬性的新加或者刪除無法監聽;

　　2、數組元素的增加和刪除無法監聽

　　那為啥2.x的時候不解決呢，從兩點考慮：

　　1.性能：通過遍歷對象的屬性進行監聽，但是屬性值也是對象就需要深度遍歷了，這時候顯然能夠劫持完整對象更好

　　2.無法監聽數組：屬性值改為數組，數組也算是一種特殊的對象，下標其實就是對象的屬性，理論上是可以通過Object.defineProperty來處理的，那尤大大為什么沒有采用這種方式呢，猜測源于數組的使用場景，數組的主要操作場景是遍歷，如果每一個元素都掛載set和get方法，會產生巨大性能消耗，而且數組下標變化頻繁，操作方法居多，一旦數組長度發生變化，在無法自動檢測的狀態下，手動更新會是一個相當繁瑣的工作。

　　那vue中是如何實現對數組的劫持呢，對7種常用的數組操作進行了重寫，分別是push() 、pop() 、shift()、 unshift() 、splice() 、sort()、 reverse()，其中Vue.set()對于數組的處理其實就是調用了splice方法

　　針對Object.defineProperty的缺點，ES6 Proxy都能夠完美得解決，它唯一的缺 點就是，對IE不友好,所以vue3在檢測到如果是使用IE的情況下(沒錯，IE11都不支持Proxy)，會自動降級為Object.defineProperty的數據監聽系統。

　　那么到這一步，恭喜哦！你已經明白了vue2.x的雙向數據綁定原理了。

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。