vue雙向數據綁定原理(vue中雙向數據綁定的原理是什么)

雙向綁定的思想

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

雙向綁定的一些方法

目前,前端實現數據雙向數據綁定的方法大致有以下三種:

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

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

2.贓值檢測(angular.js)

思路:通過輪詢的方式檢測數據變動。才特定的事件觸發時進入贓值檢測。

大致如下:

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

? XHR響應事件 ( $http )

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

? Timer事件( $timeout , $interval )

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

3.數據劫持(vue.js)

思路:使用Object.defineProperty對數據對象做屬性get和set的監聽,當有數據讀取和賦值操作時則調用節點的指令,這樣使用最通用的=等號賦值就可以觸發了。

wue雙向數據綁定小demo思路

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

varWue=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(){vartextDOMs=this.el.querySelectorAll('[w-text]'),bindText;for(vari=0;i<textDOMs.length;i++){bindText=textDOMs[i].getAttribute('w-text');textDOMs[i].innerHTML=this.data[bindText];}}

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

bindModel:function(){varmodelDOMs=this.el.querySelectorAll('[w-model]'),bindModel;var_that=this;for(vari=0;i<modelDOMs.length;i++){bindModel=modelDOMs[i].getAttribute('w-model');modelDOMs[i].value=this.data[bindModel]||'';//數據劫持this.defineObj(this.data,bindModel);if(document.addEventListener){modelDOMs[i].addEventListener('keyup',function(event){console.log('test');e=event||window.event;_that.data[bindModel]=e.target.value;},false);}else{modelDOMs[i].attachEvent('onkeyup',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){varval=value||'';var_that=this;try{Object.defineProperty(obj,prop,{get:function(){returnval;},set:function(newVal){val=newVal;_that.bindText();}})}catch(err){console.log('Browsernotsupport!')}}

⑥使用

html:<br><h4>雙向數據綁定demo</h4><pid="wrap"><inputtype="text"w-model='demo'><h6w-text='demo'></h6></p><br>js:<scriptsrc='../js/wue.js'></script><script>newWue({el:'#wrap',data:{demo:'winty'}})</script>

上述內容就是vue中雙向數據綁定的原理是什么,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注本站行業資訊頻道。