Vue、MVVM、MVC、雙向綁定


Posted by hoyi-23 on 2021-08-12

什麼是 MVVM ?

MVVM 是 Model-View-ViewModel 的簡寫。即 模型 -視圖 -視圖模型。

模型 是後端傳遞的數據。
視圖 是所看到的頁面。
視圖模型 是 MVVM 的核⼼,它是連接view和model的橋樑。

MVVM 雙向綁定

什麼是雙向綁定呢?
方向一: 模型 --> 試圖。透過數據綁定,將後端傳遞的數據轉化成所看到的頁面。
方向二: 試圖 --> 模型。透過DOM監聽事件,將所看到的頁面轉化成後端數據。
兩個方向都可以實現就是雙向綁定。
實現的方式是透過ViewModel。

ViewModel 像是 view 的代理程式,它負責值皆對 Model 做溝通,而 view 可以透過一些機制來和 viewModel 溝通已取得資料或將資料拋給 model。


什麼是 MVC ?

MVC是 Model-View-Controller的簡寫。即模型-視圖-控制器。


圖片來源: Youtube channel: WebDevSimplified

  • Model 處理所有的資料
  • View 處理所有的呈現
  • Controller 告訴Model 和 View 現在要做什麼(它只負責處理邏輯、接受通知、請求資料、叫view更新、整理response、各種委託)

M、V、C 三者各司其職,確保不管事更動哪一方時,其他方不會受到影響。

MVC 單向綁定

Model 和 View 基本上是有相關的,但是不會有直接的相依關係,他們是由Controller去決定Model產生的資料,再丟到View去呈現。

也就是說,Controller 是 Model 和 View 之間的協調者。Model 和 View不能直接溝通,以確保責任分離。


為什麼出現了 MVVM ?

當接觸的專案逐漸擴大時,往往MVC架構便會使得ViewController程式碼日漸增長而演變成(Massive View Controller),儘管多用extension或是各種命名的Manager去拆分ViewController的工作,但始終脫離不了肥大的命運。
而MVVM可以讓我們容易維護和使用方便。

兩者的差別


基於 MVVM 的 Vue

vue 漸進式框架,什麼是漸進式?

漸進式者的就是: 想要用哪部分都可以自行決定。有點像是你買一個可拆式工具箱,可以依照自己的需求選擇工具。假使我們專案不需要用到Vue-router,便可以不需要全部載入,可以僅使用core即可

Vue 的其他特點

1.關注點分離,意思就是Vue只關注畫面與資料的變化,我們不用手動更新操作DOM元素。(雙向綁定)
2.操作物件模型為主的開發模式(就是操作資料)
3.模板語法
4.元件化

Vue 響應式特性 (Reactive)

當數據變更時,VUE會幫你更新所有網頁中⽤到它的地⽅。
通過Object.defineProperty()來劫持各個属性的settergetter,在數據變動時發布消息出去,再觸發相應的監聽。


#mvvm #MVC







Related Posts

[Week 2] JavaScript - 判斷式、迴圈

[Week 2] JavaScript - 判斷式、迴圈

 JS 學習筆記 : Set & Filter

JS 學習筆記 : Set & Filter

實作紀錄:操控 DOM 來驗證報名表單

實作紀錄:操控 DOM 來驗證報名表單


Comments