MVVM定義🏳️🏳️
MVVM是Model-View-ViewModel的簡寫。即模型-視圖-視圖模型。
【模型】指的是后端傳遞的數據。
【視圖】指的是所看到的頁面。
【視圖模型】mvvm模式的核心，它是連接view和model的橋梁。
它有兩個方向:一是將【模型】轉化成【視圖】，即將后端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定 。二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成后端的數據。實現的方式是：DOM 事件監聽 。這兩個方向都實現的，我們稱之為數據的雙向綁定。總結：在MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信，ViewModel通常要實現一個observer觀察者，當數據發生變化，ViewModel能夠監聽到數據的這種變化，然后通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel也能監聽到視圖的變化，然后通知數據做改動，這實際上就實現了數據的雙向綁定。並且MVVM中的View 和 ViewModel可以互相通信。MVVM流程圖如下：
MVVM框架-VUE介紹🎌🎌:
🏹MVVM還有一種模式model-view-binder，主要用來簡化用戶界面的事件驅動程序設計
MVVM可以分成四部分並且這四部分和VUE有對應關系:
| 模型(Model)：是指代表真實狀態內容的領域模型(面向對象)，或指代表內容的數據訪問層(以數據為中心) | 模型(Model)：Vue的實例中的那些屬性 data,methods, computed 等等 |
| 視圖(View)：是用戶在屏幕上看到的結構、布局和外觀(UI) | 視圖(View)：對應真實的html和css |
| 視圖模型(VM)：暴露公共屬性和命令的視圖抽象。讓視圖和數據二者進行通信，靠的綁定器 | 視圖模型(VM)：對應Vue的模板語法 |
| 綁定器(binder)：聲明性數據和命令綁定 | 綁定器：對應v-bind, v-model ,@click, :prop等綁定數據語法 |
🏹在一個.vue文件中，我們會看到3部分<template /><script /> <style />
<template />負責視圖模型和綁定器<style />負責視圖的CSS<script />中定義的Vue實例負責模型的數據管理和綁定器的邏輯
🏹ViewModel-View階段
視圖模型轉化為視圖，也即Vue中的模板語法轉化為實際的HTML和CSS，這個部分主要由Vue自動實現，我們開發者主要處理的是Model-ViewModel階段。
Model-ViewModel階段
這個階段就是我們實例化Vue對象，添加data,methods等操作，以及將數據綁定到模板上。
Model:定義data函數管理數據count,以及定義method中add函數控制count數據的變更
ViewModel:是抽象語法，主要是Vue的模板語法，綁定數據，之后Vue會將其轉化為真實的HTML
由於，ViewModel和Model主要是綁定關系，也即是數據和視圖是綁定的，你什么樣的數據就決定了什么樣的視圖，所以我們一般也把Vue稱為數據驅動框架。
所以很多時候，只要知道數據和ViewModel的關系，也就知道UI的樣子了，這個時候，我們只需操作數據的結構，也就操作了視圖。
MVVM優點與缺點🎌🎌:
優點：
- 雙向綁定時，當Model變化時，View-Model會自動更新，View也會自動變化。
- View的功能進一步的強化，具有控制的部分功能。
- 控制器的功能大部分移動到View上處理，大大的對控制器進行了瘦身。
缺點：
- 數據綁定使得 Bug 很難被調試。
- 數據雙向綁定不利於代碼重用。
- 大的模塊，model很大，不利於內存的釋放。
MVP定義🏳️🏳️：
JQuery-MVP設計模式🎌🎌:
- M(model):模型層(數據層)(弱)
- V(view):視圖層，頁面上的DOM展示
- P(presenter):控制器(最核心的一層)，視圖和模型層的中轉站，大量代碼做DOM的操作，模型層非常弱。視圖發生改變點擊提交時控制器會去執行，控制器里負責了所有的業務邏輯，控制器可以去調模型層去發Ajax請求，控制器通過DOM操作再改變視圖層。
- 在大型項目中，JQuery編寫的百分之七八十以上的代碼都在操作DOM。JQuery是面向DOM在做開發。
MVP優點與缺點🎌🎌:
優點：
- 降低耦合
- 模塊職責划分明顯
- 利於測試驅動開發
- 代碼復用
- 隱藏數據
- 代碼靈活性
缺點：
視圖的渲染放在Presenter中，所以視圖和Presenter的交互會過於頻繁。如果Presenter過多地渲染視圖，往往會使得它與特定的視圖的聯系過於緊密。