本篇文章為大家展示了vue中雙向數(shù)據(jù)綁定的原理是什么，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

雙向綁定的思想

雙向數(shù)據(jù)綁定的思想就是數(shù)據(jù)層與UI層的同步，數(shù)據(jù)再兩者之間的任一者發(fā)生變化時都會同步更新到另一者。

雙向綁定的一些方法

目前，前端實現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的方法大致有以下三種：

1.發(fā)布者-訂閱者模式(backbone.js)

思路：使用自定義的data屬性在HTML代碼中指明綁定。所有綁定起來的JavaScript對象以及DOM元素都將“訂閱”一個發(fā)布者對象。任何時候如果JavaScript對象或者一個HTML輸入字段被偵測到發(fā)生了變化，我們將代理事件到發(fā)布者-訂閱者模式，這會反過來將變化廣播并傳播到所有綁定的對象和元素。

2.贓值檢測(angular.js)

思路：通過輪詢的方式檢測數(shù)據(jù)變動。才特定的事件觸發(fā)時進入贓值檢測。

大致如下：

?   DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )

?   XHR響應事件 ( $http )

?   瀏覽器Location變更事件 ( $location )

?   Timer事件( $timeout , $interval )

?   執(zhí)行 $digest() 或 $apply()

3.數(shù)據(jù)劫持(vue.js)

思路：使用Object.defineProperty對數(shù)據(jù)對象做屬性get和set的監(jiān)聽，當有數(shù)據(jù)讀取和賦值操作時則調(diào)用節(jié)點的指令，這樣使用最通用的=等號賦值就可以觸發(fā)了。

wue雙向數(shù)據(jù)綁定小demo思路

①  構造一個Wue對象，定義該對象的屬性el、data，創(chuàng)建對象的時候傳相應數(shù)據(jù)，并執(zhí)行init()方法。

var Wue=function(params){
 this.el=document.querySelector(params.el);
 this.data=params.data;
 this.init();
};

②  Init方法中執(zhí)行bindText和bindModel方法，這兩個方法分別是解析dom中綁定了w-model、w-text指令的html，并作相應處理。

init:function(){
  this.bindText();
  this.bindModel();
 }

③  bindText方法，把帶有w-text指令的元素放進一個數(shù)組中，如：w-text='demo'，然后令其innerHTML的值等于傳進來的data[demo]。

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i
④  bindModel方法，把帶有w-model指令的元素（一般為form相關元素）放進一個數(shù)組中，如：w-model='demo'，為每一個元素綁定keyup事件（兼容瀏覽器寫法）。
bindModel:function(){
 var modelDOMs=this.el.querySelectorAll('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i
⑤  使用Object.defineProperty，定義set和get方法，并在set方法中調(diào)用bindText方法。這是利用了一旦w-model的值在input中被改變，會自動執(zhí)行set方法，所以只有在這個方法中調(diào)用更新w-text的方法即可。
defineObj:function(obj,prop,value){
  var val=value||'';
  var _that=this;
  try{
  Object.defineProperty(obj,prop,{
  get:function(){
  return val;
  },
  set:function(newVal){
  val=newVal;
  _that.bindText();
  }
  })
 
  }catch (err){
  console.log('Browser not support!')
  } 
 }
⑥使用
html:
雙向數(shù)據(jù)綁定demo