摘要：論現(xiàn)在前端最熱門的開發(fā)方式，那必然是組件化開發(fā)。而在組件化開發(fā)里面最熱門的框架則是的。在模式中，的功能主要是監(jiān)聽層的事件，例如用戶點(diǎn)擊用戶提交輸入等操作，并根據(jù)層不同的事件響應(yīng)不同的操作。組件化繼續(xù)借用一張官網(wǎng)的圖片。

論現(xiàn)在前端最熱門的開發(fā)方式，那必然是組件化開發(fā)。而在組件化開發(fā)里面最熱門的框架則是 Facebook 的 React 。但是 React 的學(xué)習(xí)成本比較高，如果對于中小型的項(xiàng)目，使用 Vue 或許是不錯的選擇。

借用一下 Vue 官網(wǎng)的圖片， ViewModel 是連接 View 與 Model 兩層的媒介。

在 MVC 模式中， Controller 的功能主要是監(jiān)聽 View 層的事件，例如用戶點(diǎn)擊、用戶提交輸入等操作，并根據(jù) View 層不同的事件響應(yīng)不同的操作。可能會從后端（Model）讀取/寫入數(shù)據(jù)，也有可能不與后端進(jìn)行交互。

而后，Controller又會根據(jù)既定的業(yè)務(wù)流程，或根據(jù) Model 返回的值來對 View 層進(jìn)行更新。這樣的話我們所有的邏輯基本上都集中在了Controller中。

ViewModel 將自身的數(shù)據(jù)與 View 層雙向綁定了起來，當(dāng) View 有變動的時候，會反映到 ViewModel 中，并觸發(fā)相應(yīng)的處理函數(shù)，這些處理函數(shù)（不管是單純的數(shù)據(jù)處理或者從后端請求數(shù)據(jù)），會去更新 ViewModel 的數(shù)據(jù)，而 ViewModel 的數(shù)據(jù)變動會實(shí)時反映到 View 當(dāng)中。

所以，不管是 View 還是 Model 都讀寫的是 ViewModel 的數(shù)據(jù)，View 層的邏輯交給了 View 層，而數(shù)據(jù)處理的邏輯交給了 Model 層。ViewModel 算是在兩層之間提供了一個接口。

繼續(xù)借用一張 Vue 官網(wǎng)的圖片。在以前我們開發(fā)的時候，如果想復(fù)用一個部分，例如表格，我們會使用 JS 來生成HTML，并且根據(jù)給定的容器、數(shù)據(jù)、配置信息來生成 HTML 片段，插入容器當(dāng)中。之后得再引用表格相關(guān)的 CSS。

而 Vue 的組件包括模板（HTML）、邏輯（JS）、樣式（CSS）三部分。只要給這個組件相應(yīng)的數(shù)據(jù)，這個組件便是一個完備的組件，各種該組件相關(guān)的事件處理，數(shù)據(jù)請求，UI更新都在組件中完成。

使用一個 Vue 組件也非常方便，除了申明以外，直接在 HTML 中引入自定義標(biāo)簽，標(biāo)簽名為組件的名字，使用標(biāo)簽屬性來給組件傳遞數(shù)據(jù)。

使用 Webpack 以后，Vue 每一個組件可以封裝在獨(dú)立的文件中，包括