自從angular火了以后，各種mvc框架?chē)娪慷觯琣ngular雖然比較火，但是他的坑還是蠻多的，還有許多性能問(wèn)題被人們吐槽。比如坑爹的臟檢查機(jī)制，數(shù)據(jù)binding是受人喜愛(ài)的，臟檢查就有點(diǎn)…性能低下了。有時(shí)候改了一個(gè)地方，臟循環(huán)要循環(huán)多次來(lái)保證數(shù)據(jù)是不是真的變了和是否停止變化了。這樣性能就很低了。于是人們開(kāi)始鉆研新的雙向數(shù)據(jù)binding的方法。尤大的vue binding就是本人蠻喜歡的一種實(shí)現(xiàn)方式，本文跟隨尤大的一個(gè)例子來(lái)詳解vue的數(shù)據(jù)binding的原理。

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的彝良網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

數(shù)據(jù)binding，一般也就是正則匹配到元素中的模板，然后代碼切換為程序員給的data。雙向binding除了臟檢查機(jī)制，尤大用es5的defineProperty來(lái)實(shí)現(xiàn)的雙向數(shù)據(jù)binding，攔截了對(duì)象的set和get方法，這個(gè)就比較有效了。同樣的avalon也是此方法，用正美的話說(shuō)：“我只是在var data = 1的時(shí)候攔截了'=‘“。原理都是一樣的。我們直接上例子：（這里跟隨尤大的腳步）（復(fù)制可用）

  
    
    
  
  
    

      
hello
      
hello
      
hello
      
hi
      

    
    
  

這應(yīng)該就是vue數(shù)據(jù)binding的原理了。一些地方都寫(xiě)在注釋了。

這個(gè)數(shù)據(jù)binding的流程是怎樣的？

開(kāi)始弄一個(gè)屬性占位符data-element-binding，正則把原元素的內(nèi)容加個(gè)標(biāo)簽再加上此屬性，屬性的值是綁定的值的key，比如msg是hello，則data-element-binding=”msg“，同時(shí)在匹配的時(shí)候把這個(gè)key存到bindings對(duì)象里面，bindings暫存綁定數(shù)據(jù)。

遍歷bindings對(duì)象，再把每個(gè)存在data-element-binding的元素以它的key（比如msg）存到bindings里面，然后刪除dom中的data-element-binding屬性。

最重要的是：它維護(hù)了一個(gè)data對(duì)象，這個(gè)data對(duì)象是binding的關(guān)鍵，他是m和v的接口。他循環(huán)定義屬性key（比如msg），然后在set的時(shí)候更新dom的數(shù)據(jù)，完成的binding，也就是劫持了”=“的操作，并且把這個(gè)值存到bindings里暫存。set的時(shí)候返回的是bindings里面的暫存數(shù)據(jù)。這樣的好處就是我始終是使用js的原生方法，我改變data就會(huì)實(shí)現(xiàn)雙向的綁定。v=>m的binding只需要一個(gè)onchange事件就可以，避免了循環(huán)的檢查。

vue的單項(xiàng)綁定就是這樣了，有趣的地方是你在控制臺(tái)修改data的屬性，p標(biāo)簽的內(nèi)容也會(huì)相應(yīng)改變，這正是es5 set方法的特點(diǎn)，這樣的雙向綁定是好維護(hù)并且沒(méi)有副作用的，而且性能還是很強(qiáng)大的。

那見(jiàn)識(shí)過(guò)vue的數(shù)據(jù)綁定以后我們實(shí)現(xiàn)一個(gè)input的雙向數(shù)據(jù)綁定（跟源碼不一樣的說(shuō)）

其實(shí)input的雙向binding很簡(jiǎn)單，因?yàn)関ue已經(jīng)幫我們做好了data屬性，那么我在操作data的時(shí)候?qū)嶋H上已經(jīng)完成了m到v的雙向綁定。那么原理很簡(jiǎn)單，onkey的時(shí)候就修改data數(shù)據(jù)就好了。先上代碼：（復(fù)制可用）

修改的地方也注釋了，結(jié)果會(huì)看到當(dāng)我打開(kāi)的時(shí)候，input已經(jīng)被binding了msg和hey：

當(dāng)我有輸入的時(shí)候：

當(dāng)我操作data的時(shí)候：

雙向binding已經(jīng)ok，么么噠。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。