vue雙向資料綁定原理探究

雙向綁定的想法

雙向資料綁定的想法就是資料層與UI層的同步，資料再兩者之間的任一者發生變化時都會同步更新到另一者。

雙向綁定的一些方法

目前，前端實現資料雙向資料綁定的方法大致有以下三種：

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

思路：使用自訂的data屬性在HTML程式碼中指明綁定。所有綁定的JavaScript物件以及DOM元素都將「訂閱」一個發布者物件。任何時候如果JavaScript物件或一個HTML輸入欄位被偵測到發生了變化，我們將代理事件到發布者-訂閱者模式，這會反過來將變化廣播並傳播到所有綁定的物件和元素。

2.贓物值檢測(angular.js)

思路：透過輪詢的方式檢測資料變動。才特定的事件觸發時進入贓物值偵測。

大致如下：

•   DOM事件，譬如使用者輸入文本，點選按鈕等。 。 ()

3.資料劫持(vue.js)

思路：使用Object.defineProperty對資料物件做屬性get和set的監聽，當有資料讀取和賦值操作時則呼叫節點的指令，這樣使用最通用的=等號賦值就可以觸發了。

wue雙向資料綁定小demo思路

①  建構一個Wue對象，定義該對象的屬性el、data，創建對象的時候傳相應數據，並執行init()方法。

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

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

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

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

bindText:function(){
  var textDOMs=this.el.querySelectorAll('[w-text]'),
  bindText;
  for(var i=0;i<textDOMs.length;i++){
  bindText=textDOMs[i].getAttribute(&#39;w-text&#39;);
  textDOMs[i].innerHTML=this.data[bindText];
  }
 }

④  bindModel方法，把帶有w-model指令的元素（一般為form相關元素）放進一個數組中，如：w-model='demo'，為每一個元素綁定keyup事件（相容瀏覽器寫法）。

bindModel:function(){
 var modelDOMs=this.el.querySelectorAll('[w-model]'),
 bindModel;
 var _that=this;
 for(var i=0;i<modelDOMs.length;i++){
 bindModel=modelDOMs[i].getAttribute(&#39;w-model&#39;);
 modelDOMs[i].value=this.data[bindModel]||&#39;&#39;;
 //数据劫持
 this.defineObj(this.data,bindModel);
 if(document.addEventListener){
 modelDOMs[i].addEventListener(&#39;keyup&#39;,function(event) {
  console.log(&#39;test&#39;);
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }else{
 modelDOMs[i].attachEvent(&#39;onkeyup&#39;,function(event){
  e=event||window.event;
  _that.data[bindModel]=e.target.value;
 },false);
 }
 }
}

⑤  使用Object.defineProperty，定義set和get方法，並在set方法中呼叫bindText方法。這是利用了一旦w-model的值在input中被改變，會自動執行set方法，所以只有在這個方法中呼叫更新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:<br><h3>双向数据绑定demo</h3>
<div id="wrap">
 <input type="text" w-model=&#39;demo&#39;>
 <h5 w-text=&#39;demo&#39;></h5>
</div><br>js:
 <script src=&#39;../js/wue.js&#39;></script>
 <script>
 new Wue({
 el:&#39;#wrap&#39;,
 data:{
  demo:&#39;winty&#39;
 }
 })
 </script>

以上就是本文的全部內容，希望本文的內容對大家的學習或工作能帶來一定的幫助，同時也希望多多支持PHP中文網！

更多vue雙向資料綁定原理探究相關文章請關注PHP中文網！