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

a tag 遺失 block 屬性

a tag 遺失 block 屬性

Vue3 安裝 SCSS 編譯器!然後跑不起來怎麼辦?

Vue3 安裝 SCSS 編譯器!然後跑不起來怎麼辦?

2356. Number of Unique Subjects Taught by Each Teacher

2356. Number of Unique Subjects Taught by Each Teacher


Comments