在vue中,mvvm模式分別是模型層(m)、視圖層(v)和ViewModel(vm);mvvm支持雙向綁定,當(dāng)m層數(shù)據(jù)進(jìn)行修改時,vm層會檢測到變化,并且通知v層進(jìn)行相應(yīng)的修改,反之修改v層會通知m層進(jìn)行修改,實現(xiàn)了視圖與模型層的相互解耦。
本文操作環(huán)境:windows10系統(tǒng)、Vue2.9.6版,DELL G3電腦。
vue中mvvm模式如何理解
MVVM分為三個部分:分別是M(Model,模型層 ),V(View,視圖層),VM(ViewModel,V與M連接的橋梁,也可以看作為控制器)
1、 M:模型層,主要負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)相關(guān);
2、 V:視圖層,顧名思義,負(fù)視圖相關(guān),細(xì)分下來就是html+css層;
3、 VM:V與M溝通的橋梁,負(fù)責(zé)監(jiān)聽M或者V的修改,是實現(xiàn)MVVM雙向綁定的要點;
MVVM支持雙向綁定,意思就是當(dāng)M層數(shù)據(jù)進(jìn)行修改時,VM層會監(jiān)測到變化,并且通知V層進(jìn)行相應(yīng)的修改,反之修改V層則會通知M層數(shù)據(jù)進(jìn)行修改,以此也實現(xiàn)了視圖與模型層的相互解耦;
要實現(xiàn)一個mvvm的庫,我們首先要理解清楚其實現(xiàn)的整體思路。先看看下圖的流程:
1.實現(xiàn)compile,進(jìn)行模板的編譯,包括編譯元素(指令)、編譯文本等,達(dá)到初始化視圖的目的,并且還需要綁定好更新函數(shù);
2.實現(xiàn)Observe,監(jiān)聽所有的數(shù)據(jù),并對變化數(shù)據(jù)發(fā)布通知;
3.實現(xiàn)watcher,作為一個中樞,接收到observe發(fā)來的通知,并執(zhí)行compile中相應(yīng)的更新方法。
4.結(jié)合上述方法,向外暴露mvvm方法
【