在面試一些大廠的時候，面試官可能會問到你vue雙向數(shù)據(jù)綁定的原理是什么？有些小伙伴不知道是什么東西，這樣你在面試官的眼里就大打折扣了，今天小千就來給大家介紹一下vue的雙向綁定原理，千萬不要錯過啦。

      vue雙向綁定

      大家其實對于這個問題不會很陌生，vue中采用mvvm的模式，內置vm將view層與model層兩者進行關聯(lián)，任何一方的變化都會讓另外一方受到影響。那回答完后，面試官還會繼續(xù)追問，請回答一下你理解的雙向數(shù)據(jù)綁定背后的原理是什么？那今天我們就一起探討一下vue的背后的一些方式實現(xiàn)。

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

      來，直接上圖看一下

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

      上代碼運行一下：

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

      那，后續(xù)當我們去修改數(shù)據(jù)，視圖會不會自動更新呢？

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

      補充小貼士

      vue 2.x中使用的Object.defineProperty對于數(shù)據(jù)進行攔截，其實還是有缺陷的

      1、對象屬性的新加或者刪除無法監(jiān)聽；

      2、數(shù)組元素的增加和刪除無法監(jiān)聽

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

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

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

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

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

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

      想學習web前端的同學，可以參考千鋒web前端培訓班提供的web前端學習路線，該學習路線對從零基礎小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個明確清晰的指導，根據(jù)千鋒web前端培訓機構提供的web前端學習路線圖可以讓你對學習web前端開發(fā)需要掌握的知識有個清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學習路線和免費的學習資料可以添加我們的web前端技術分享交流qq群：857920838  加群找群管理領取即可，等你來哦~~