摘要：論現(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í)成本比較高，如果對(duì)于中小型的項(xiàng)目，使用 Vue 或許是不錯(cuò)的選擇。

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

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

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

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

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

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

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

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

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