前段時間面試，mvvm原理成為了一道必考題。由於理解不夠深，最近詳細了解以結構圖流程分析原理。
var vm = new mvvm(
}});複製**
class mvvm ;
var data = this._data = this.$options.data;
object.keys(data).foreach(key => )
//資料劫持
observe(data, this);
//編譯
this.$compile = new compile(options.el || document.body, this);
}_proxydata(key, setter, getter) ,
set: function proxysetter(newval) })}
}複製**
class compile
}node2fragment(el) ;
return fragment;
}init
() compileelement(el) \}/;
if(this.iselementnode(node))else
if(this.istextnode(node) && reg.test(text))
if(node.childnodes && node.childnodes.length)})}
compile(node)else
node.removeattribute(attrname);}})
}isdirective(attr)
iseventdirective(attr)
iselementnode(node)
istextnode(node)
compiletext(node, exp)
}//指令處理集合
var compileutil =
var updater =
複製**
//資料劫持
class observer
walk(data) )
}convert(key, val)
//繫結資料，新增發布訂閱，核心**
definereactive(data, key, val)
return val;
},set: function(newval)
val = newval;
// 新的值object的話，進行監聽
childobj = observe(newval);
console.log(newval);
//通知訂閱者
dep.notify();}})
}}function observe(value, vm)
return new observer(value);
}複製**
var uid = 0;
class dep
addsub(sub)
depend
() removesub(sub)
notify
() )
}}dep.target = null;
複製**
class watcher;
if(typeof exporfn === 'function') else
this.value = this.get();
}update
() run
() }
get() parsegetter(exp)
return obj;}}
adddep(dep)
}}複製**
MVVM模式理解
mvvm 是 model view viewmodel 的縮寫。model代表資料模型，也可以在model中定義資料修改和操作的業務邏輯。view代表ui 元件，它負責將資料模型轉化成ui 展現出來。viewmodel監聽模型資料的改變和控制檢視行為 處理使用者互動，簡單理解就是乙個同步view 和...
對於MVVM的理解
參考 一 mvvm 分為3個模組 1.view 2.viewmodel 3.model 關係為 二 mvvm出現的原因 傳統mvc模式中controller中做了太多的資料加工的事情，隨著軟體規模的增長，越來越不好維護。越來越不好測試。所以mvvm把資料加工的任務從controller中解放了出來。...
簡單理解MVVM模式
mvvm是model view viewmodel的簡稱，是一種前端開發的架構模式，其核心是資料的雙向繫結。在mvvm中viewmodel 通過雙向資料繫結把 view 層和 model 層連線了起來，而view 和 model 之間的同步工作完全是自動的，無需人為干涉，我們不需要再手動操作dom，...