Vue、MVVM、MVC、雙向綁定

什麼是 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()來劫持各個属性的setter、getter，在數據變動時發布消息出去，再觸發相應的監聽。