淺談vue的雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？

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

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

　　來，直接上圖看一下

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

　　上代碼運(yùn)行一下：

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

　　那后續(xù)當(dāng)我們?nèi)バ薷臄?shù)據(jù)，視圖會(huì)不會(huì)自動(dòng)更新呢？

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

　　vue 2.x中使用的Object.defineProperty對于數(shù)據(jù)進(jìn)行攔截，其實(shí)還是有缺陷的，具體如下：

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

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

　　那為啥2.x的時(shí)候不解決呢，從兩點(diǎn)考慮：

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

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

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

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

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

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