iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

菜鳥學前端,一起vue起來 !系列 第 9

Day 9. 雙向綁定-MVVM

常提到的設計架構MVC與MVVM
MVC
MVC全名為Model View Controller ,是模型(Model)- 視圖(View)- 控制器(Controller)的縮寫。

  • 模型(Model) - 程式設計師編寫程式應有的功能(實現演算法等等)、資料庫專家進行資料管理和資料庫設計(可以實現具體的功能)。
  • 視圖(View) - 介面設計人員進行圖形介面設計(渲染圖形化介面)。
  • 控制器(Controller)- 負責轉發請求,對請求進行處理(M、V間的連接器)。
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400mr3YjeadkW.jpg

MVVM
MVVM全名為Model View ViewModel,是模型(Model)- 視圖(View)- 視圖模型(Viewmodel)的縮寫。

  • 模型(Model) - 以資料為中心,為資料的存取層。
  • 視圖(View) - 我們所見的畫面呈現,像是網頁的結構、佈局與UI 外觀。
  • 視圖模型(Viewmodel)- 用來操控內容的Model、自動綁定中間的部分。
    https://ithelp.ithome.com.tw/upload/images/20210916/20131400z2zaMoxplt.jpg

View和Model會星由ViewModel來進行聯繫,ViewModel通過連接間數據綁定來聯繫畫面與數據的動態,view透過viewModel的資料渲染頁面,當使用者操作頁面時,view層接收事件給viewModel處理,viewModel呼叫model處理資料,model處理完畢後,呼叫viewModel更新資料,viewModel資料變動,觸發view更新畫面。

View 與 Model 彼此之間同時變動,且藉由中間的 ViewModel 自動轉換,畫面改變時,會改變資料的狀態,資料狀態改變時,畫面也會跟著更動。

BUT! Vue.js 不完全是 MVVM框架哦,只是概念運用深受MVVM的影響!
https://ithelp.ithome.com.tw/upload/images/20210916/201314006in4M9UEeC.png
https://ithelp.ithome.com.tw/upload/images/20210916/20131400GQk30CNQ0b.png
當我們改變model裡message數據時, ViewModel也會去改變View裡的數據,畫面也會跟著改變。
https://ithelp.ithome.com.tw/upload/images/20210916/20131400RqE1spllNg.png
https://ithelp.ithome.com.tw/upload/images/20210916/20131400gQAEeG8vhs.png

參考資料
程式設計師應該知道的MVC,MVP,MVVM設計模式區別及優缺點
MVC
MVVM
【Vue.js】MVVM 雙向綁定


上一篇
Day 8. 聲明式渲染-跟Vue說Hello
下一篇
Day 10. 實實在在的實體 - Vue Instance
系列文
菜鳥學前端,一起vue起來 !30

尚未有邦友留言

立即登入留言