MVC和MVVM設計模式簡單理解


1.mvc設計模式理解
Model: 模型 持有所有的數據狀態和業務邏輯; 泛指數據庫,鏈接數據庫,建立數據模型
View: 視圖 用來展示數據模型在頁面上,泛指前端
Controller: 控制器, 接收用戶的數據,進行邏輯處理后,傳給model. 泛指后端
優點: 模塊化 易復用
 
2.vuex理解 (和本篇無關,只做記錄)
vuex是為vue程序開發的狀態管理模式,它采用集中式的管理模式存儲管理所有組件的狀態,並按
照一定的規則保證狀態以一種可預測的方式發生變化!
出現原因: 管理不斷變化的state非常困難,不可控性; 例如非父子組件傳值問題,傳值方式繁瑣.
使用場景: 中大型單頁面應用; 小型應用不使用,顯得項目繁瑣.
3.MVVM設計模式(vue)的理解
(1)先看下MVC設計模型,view層展示Model層的數據進行渲染頁面,Controller層接收用戶操作的
數據進行后端的業務處理后,在傳遞給Model層進行建立數據模型,最后view進行重新請求Model
數據進行更新頁面數據.
這種模式的缺點: 1.view -- model層關聯密切: view層請求model層數據進行頁面渲染;當model層
數據發生變化的時候,view需要再次重新請求model數據進行渲染;...
2.Controller: 接收用戶行為,進行邏輯處理后,數據發生改變; 每次改變都要發送給Model層,然后
Model改變,進而view改變.
(2)那可不可以直接view -- model實現自動同步/響應式呢.
這就是MVVM設計模式:
Model: 數據層,泛指數據庫
View:視圖層,泛指前端
ViewModel:監聽模型數據的改變和用戶的輸入等行為,處理用戶的交互邏輯;簡單說,就是一個連接
model和view的對象.
view和model是相互獨立的,通過vm(viewmodel)這個連接的對象或者說橋梁來實現同步響應式的
變化; 當model發生數據改變,view層會自動同步,同理當view操作數據改變后,model層也會同步!
其實,MVVM設計模式中,只是把controller層弱化了,交給viewmodel處理.這樣做的優點:
開發者不用再關心DOM更新同步和狀態變化同步到數據庫問題. 只需要關心業務邏輯.
而把狀態管理交給viewmodel.
MVVM設計模式:實現view model同步的原理:
Object.defineProperty()定義的set和get函數

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM