MVVM模式
視圖層和數(shù)據(jù)層的雙向綁定,讓我們無(wú)需再去關(guān)心DOM操作的事情遂蛀,更多的精力放在數(shù)據(jù)和業(yè)務(wù)邏輯上去
-
MVVM是Model-View-ViewModel的縮寫(xiě)栈戳。MVVM是一種設(shè)計(jì)思想艇肴。
- Model 層代表數(shù)據(jù)模型扫沼,也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯;
- View 代表UI 組件脾歧,它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來(lái)甲捏,
- ViewModel 是一個(gè)同步View 和 Model的對(duì)象。
在MVVM架構(gòu)下鞭执,View 和 Model 之間并沒(méi)有直接的聯(lián)系司顿,而是通過(guò)ViewModel進(jìn)行交互,Model 和 ViewModel 之間的交互是雙向的兄纺,因此View 數(shù)據(jù)的變化會(huì)同步到Model中大溜,而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
ViewModel 通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)估脆,而View 和 Model 之間的同步工作完全是自動(dòng)的钦奋,無(wú)需人為干涉,因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯疙赠,不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題付材,復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理。
Vue.js優(yōu)點(diǎn) - 面向數(shù)據(jù)編程
- 低耦合圃阳。 視圖(View)可以獨(dú)立于Model變化和修改厌衔,一個(gè)ViewModel可以綁定到不同的"View"上,當(dāng)View變化的時(shí)候Model可以不變捍岳,當(dāng)Model變化的時(shí)候View也可以不變富寿。
- 可重用性。 你可以把一些視圖邏輯放在一個(gè)ViewModel里面锣夹,讓很多view重用這段視圖邏輯页徐。
- 獨(dú)立開(kāi)發(fā)。 開(kāi)發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)(ViewModel)银萍,設(shè)計(jì)人員可以專注于頁(yè)面設(shè)計(jì)变勇。
- 可測(cè)試。 界面素來(lái)是比較難于測(cè)試的贴唇,而現(xiàn)在測(cè)試可以針對(duì)ViewModel來(lái)寫(xiě)易用靈活高效