>本節講解的內容對前面的章節具有依賴性，如果看起來有困難，請先看本系列前面的章節 ## 一、MVVM模型  在第一節：前端響應式框架VUE簡介中我們曾簡單的介紹過MVVM模型。 + MVVM：頁面輸入改變數據，數據改變影響頁面數據展示與渲染 - M（model）：普通的javascript數據對象 - V（view）：前端展示頁面或前端組件 - VM（ViewModel）：用于雙向綁定數據與頁面，對于我們的課程來說，就是vue的實例 具體到編碼層面，**注意我們提到的MVVM都是前端的概念**，體現如下：  * VIewModel（VUE的實例）作為MVVM模型的核心，負責監聽DOM的變化去修改Model（data）數據；負責將數據綁定到頁面上進行數據展示及頁面渲染。是View與Model溝通的橋梁。 * ViewModel幫我們實現了雙向數據綁定的底層支撐，即VUE幫我們實現。 * ViewModel是對視圖及模型的抽象，即可以操作視圖，也可以操作數據模型，并實現二者的自動響應式的彼此影響。 ## 二、MVVM模型與直接操作DOM的區別 如果，我們使用js操作DOM的方式完成上面的代碼完成的工作。首先，我們需要先選取需要進行操作的DOM節點，為此我們需要為h2標簽加上一個id，如h2id。然后通過ajax向服務器發送請求，接收服務端的數據。通過dom節點，操作節點的數據和顯示樣式。 ``` var dom = document.getElementById('h2id'); //向服務器發送ajax請求，獲取數據，如 '你好，Vue'; dom.innerText = '你好，Vue'; ``` 然而MVVM編程模型**不需要關心DOM的結構**。同樣的操作只需要下面這一行代碼： ``` app.message = 'zimug'; ``` * MVVM模型不關心DOM的結構，不需要尋找DOM節點 * MVVM模型通過修改模型數據改變視圖顯示，不使用DOM的innerText、innerHtml等 * MVVM模型要求我們在前端考慮數據模型，這樣有更利于前后端解耦，實現前后端分離應用的開發。（也就是說，開發階段可以先在前端模型里面寫假數據，前后端并行開發） ## 三、MVVM和MVC模式區別與聯系 * MVVM是MVC模式的一個演變，是John Gossman在《Model/View/ViewModel pattern for building WPF apps》中提出的。 * 但在實際的開發應用中，MVC是后端開發廣泛應用的模式，而MVVM模式是前端廣泛應用的模式，從使用的角度二者并無交集。所以**筆者建議：不要將二者強行的關聯比較，學MVC的時候學MVC（后端），學MVVM的時候就學MVVM（前端），這樣就足夠了，否則容易暈掉**。 * MVC的Model指的是服務端的Model，而MVVM的Model指的是javascript端的Model。這個變化非常有意義，真正的實現了前后端的分離。前端開發可以先在model里面寫假數據，然后再與后端進行數據接口對接。 * 二者的核心思想都是將視圖（View）與模型（Model）解耦，即視圖與數據的解耦。 在后面的章節中，我們通過實際的應用，相信大家會對MVVM模式有更加深入的理解！