vue雙向數據綁定原理探究

來源：懂視網責編：小采時間：2020-11-27 20:26:16

vue雙向數據綁定原理探究

vue雙向數據綁定原理探究:雙向綁定的思想雙向數據綁定的思想就是數據層與UI層的同步，數據再兩者之間的任一者發生變化時都會同步更新到另一者。雙向綁定的一些方法目前，前端實現數據雙向數據綁定的方法大致有以下三種：1.發布者-訂閱者模式(backbone.js)思路：使用自定義的data屬

推薦度：

點擊下載本文 文檔為doc格式

導讀vue雙向數據綁定原理探究:雙向綁定的思想雙向數據綁定的思想就是數據層與UI層的同步，數據再兩者之間的任一者發生變化時都會同步更新到另一者。雙向綁定的一些方法目前，前端實現數據雙向數據綁定的方法大致有以下三種：1.發布者-訂閱者模式(backbone.js)思路：使用自定義的data屬

雙向綁定的思想

雙向數據綁定的思想就是數據層與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()方法。

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('w-text');
 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('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){
 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='demo'>
 <h5 w-text='demo'></h5>
</div><br>js:
 <script src='../js/wue.js'></script>
 <script>
 new Wue({
 el:'#wrap',
 data:{
 demo:'winty'
 }
 })
 </script>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue雙向數據綁定原理探究

推薦度：

點擊下載本文 文檔為doc格式

標簽：原理 VUE 雙向

熱門焦點

vue雙向數據綁定原理探究

vue雙向數據綁定原理探究

vue雙向數據綁定原理探究

最新推薦

猜你喜歡

熱門推薦