vue的資料雙向繫結的小例子：
。html
index.js
function selfvue (data, el, exp) );//對data的每一層級的屬性進行監聽，如果變化執行notify
observe(data);
//初始化模板資料的值
el.innerhtml = this
.data[exp];
new watcher(this
, exp, function (value) );
return
this;}
selfvue.prototype =,
set: (newval)=>
});}
}
observer.js
function observer(data)observer.prototype =);
},definereactive: function(data, key, val)
return
val;
},set: function(newval)
val =newval;
dep.notify();
}});
}};function observe(value, vm)
return
newobserver(value);
};function dep ()
dep.prototype =,
notify: function() );
}};dep.target = null;
watcher.js
function watcher(vm, exp, cb)watcher.prototype =,
run: function()
},get: function() ）被新增上
dep.target = null; //
釋放自己
return
value;
}};
原理：當new vue後，將data屬性直接給vm新增上，將屬性的每一級進行set get 當set新值時通知notify函式。執行 new watcher ，強制執行data的get 使watch被新增上。
當data set新值時，觸發notify函式，使所有watcher都執行update，watcher的update時，本地的value是舊值，取新值，**函式更新view。
vue雙向資料繫結原理
vue應用的是mvvm框架，view和model分離，然後通過vm雙向資料繫結，div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結，是怎麼實現的呢，首先vue利用es5的defineproperty方法裡的get，set...
vue雙向資料繫結原理
text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...
vue 雙向資料繫結原理
1 2 input type text id input 34 p id desc p 1 let obj 2 let temp 採用臨時變數 obj 3 object.defineproperty obj,name 8 給obj的name屬性賦值會觸發 9set val 15 1617 設定了id...