1.2 MVVM族員——Vue.js

模型—視圖—視圖模型（Model-View-ViewModel, MVVM），本質(zhì)上是MVC（模型—視圖—控制器）的改進(jìn)版，其最重要的特性即是數(shù)據(jù)綁定（data binding），此外還包括依賴注入、路由配置、數(shù)據(jù)模板等一些特性。

1.2.1 從MVC到MVVM

模型—視圖—控制器（Model-View-Controller, MVC）模式，在Web 1.0時(shí)代曾被廣泛應(yīng)用于Web架構(gòu)中，然而其誕生的時(shí)間卻比Web早幾年。最初，MVC被應(yīng)用于桌面程序中，在PHP、JSP等腳本語言誕生之后，也逐漸成為Web開發(fā)的主流模式。

View視圖層是用戶能夠看到并進(jìn)行交互的客戶端界面，如桌面應(yīng)用的圖形界面、瀏覽器端渲染的網(wǎng)頁等；Model指業(yè)務(wù)模型，用于計(jì)算、校驗(yàn)、處理和提供數(shù)據(jù)，但不直接與用戶產(chǎn)生交互；Controller控制器則負(fù)責(zé)收集用戶輸入的數(shù)據(jù)，向相關(guān)模型請求數(shù)據(jù)并返回相應(yīng)的視圖來完成交互請求，如圖1.8所示。

MVC模式實(shí)現(xiàn)了M和V的代碼分離，M專注于數(shù)據(jù)，V專注于表達(dá)，C則在M和V之間架起了一座橋梁。即使采用同一個(gè)Model的數(shù)據(jù)，如果調(diào)用不同的View（如柱狀圖和表格），也會(huì)得到不同的頁面呈現(xiàn)。這樣的設(shè)計(jì)，不僅減少了Model層的冗余代碼，使得Model和View更加靈活和易于維護(hù)，同時(shí)也簡化了項(xiàng)目的架構(gòu)和管理。

隨著技術(shù)日新月異的更迭，MVC漸漸演化出更多的形態(tài)。雖然這些模式都有特定的名稱，然而實(shí)際上它們都是MVC的衍生版本。因此，有的開發(fā)者也會(huì)將其統(tǒng)一稱作“MV*模式”，MVVM即是其中的一種。

與MVC模式一樣，MVVM的主要目的是分離視圖（View）和模型（Model），ViewModel層封裝了界面展示和操作的屬性和接口。通過數(shù)據(jù)綁定，我們可以將View和ViewModel關(guān)聯(lián)在一起，當(dāng)ViewModel中的數(shù)據(jù)發(fā)生變化時(shí)，View也會(huì)同步進(jìn)行更新，如圖1.9所示。

MVVM模式解耦了視圖和模型。在模式中，每一個(gè)視圖都有對應(yīng)的一個(gè)ViewModel，同時(shí)ViewModel與模型建立聯(lián)系。當(dāng)接收到用戶請求后，ViewModel獲取模型響應(yīng)的數(shù)據(jù)，并通過數(shù)據(jù)綁定將相應(yīng)的視圖頁面重新渲染。模型層的數(shù)據(jù)只需要傳入ViewModel即可實(shí)現(xiàn)視圖的同步更新，從而實(shí)現(xiàn)了視圖和模型之間的松散耦合。

與MVC不同的是，MVC是系統(tǒng)架構(gòu)級別的，而MVVM是用于單頁面上的。因此，MVVM的靈活性要遠(yuǎn)大于MVC。如果將這里的M拋開，只看VVM的話，那這就是一個(gè)組件（如treeview）的設(shè)計(jì)模式。所以，MVVM模式也是組件化開發(fā)的最佳實(shí)踐。

1.2.2 Vue.js簡介

Vue.js是一套輕量級MVVM框架，由時(shí)任Google工程師的尤雨溪（現(xiàn)擔(dān)任阿里Weex團(tuán)隊(duì)技術(shù)顧問）創(chuàng)作并開源。截至本書編寫時(shí)，Vue.js已在GitHub獲得star數(shù)9.3萬個(gè)，而同為MVVM框架且更早誕生的React獲得的star數(shù)不過9.5萬個(gè)，Angular則是5.8萬，如圖1.10所示。

與其他重量級框架不同的是，Vue的核心庫只關(guān)注視圖層，并且提供盡可能簡單的API以實(shí)現(xiàn)數(shù)據(jù)綁定、組件復(fù)用等機(jī)制，且非常容易學(xué)習(xí)并混入其他庫。同時(shí)，Vue也完全有能力支持采用SPA設(shè)計(jì)和組合其他Vue生態(tài)庫的系統(tǒng)。