var
data
= ; var vm =
new vue();
function
nodetofragment
(node,vm)
return frag;
}var dom = nodetofragment(document.getelementbyid(id),this);
function
compile
(node,vm) \}/,// .為匹配除\r\n之外的任意單個字元，*為匹配前面字元任意多次
name;
//元素節點
if(node.nodetype == 1));//此處已假定node為input元素，監聽此input，若其value有變化則將其反映到vm.data的name中，name為'v-model'屬性對應的nodevalue。到這裡，已經實現了dom到vm.data的繫結。
new watcher(vm,node,name);//這一步實現vm.data到dom的繫結
node.removeattribute('v-model');//從node中刪除v-model屬性。
break;}}
}//若node為文字節點，判斷文字節點的值是不是}這種形式。
if(node.nodetype == 3)\}/中括號內匹配到的值，name在vm.data中也有
new watcher(vm,node,name);//為vm.name新增***，實現從vm到dom的繫結}}
}
function dep()
dep.prototype = ,
notify:function () )
}};
function
watcher
(vm,node,name)
watcher.prototype =
};
function
observe
(obj) )
}function
definereactive
(obj,key,val)
return val;
},//當重寫vm.data中的屬性時，就重置vmodeleles中元素的value，vmodeleles為所有有v-model屬性的元素
set:function
(value)
if(value == val) return;
//若兩次值不同，將呼叫dep.notify方法，啟動所有watcher，更改nodevalue
val = value;
dep.notify();
console.log(val);
}});
}
vue雙向資料繫結及其底層原理
什麼式雙向資料繫結 viewmodel對model層進行更新的時候，viewmodel中的binder會自動地把資料更新到view層上去，當使用者操作了view層 例如 表單地輸入 viewmodel也會自動地把資料更新到model層上。這種方式成為 雙向資料通訊 雙向資料通訊的底層原理 vue在建...
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...