Vue.js 是一個漸進式 MVVM 框架，目前被廣泛使用，也成為目前前端技術(shù)中頗具代表性的一個框架。
按 Vue 作者的說法，Vue（及其生態(tài)）是一個漸進式 MVVM 框架，可以按照實際需要逐步進階使用更多特性。
聲明式渲染
簡單來說，聲明式渲染即希望開發(fā)者更多地表達 “想要什么”，而不用太關心想要的效果的實現(xiàn)細節(jié)。例如，我們希望頁面上有一個 2x2 的表格，而命令式的實現(xiàn)方式是使用 Canvas 自己畫：
// 獲取畫面和context
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 定義寬高和行列數(shù)
const width = 200, height = 100;
const colCount = 2, rowCount = 2;
// todo:定義畫筆顏色
// 畫橫線
for(let i = 0; i <= rowCount; i++){
ctx.moveTo(0, height / rowCount * i);
ctx.lineTo(width, height / rowCount * i);
}
// 畫豎線
for(let i = 0; i <= colCount; i++){
ctx.moveTo(width / colCount * i);
ctx.lineTo(width / colCount * i, height);
}
document.body.appendChild(canvas);
我們需要自己關心實現(xiàn)細節(jié)，例如每一條線的坐標、每一條表格線的繪制等等。所幸 HTML 為我們提供了 <table> 元素，可以讓我們更簡單地實現(xiàn)表格：
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
相比 Canvas 的表格，我們只需要說明需要多少行，每一行有多少個單元格即可，不用自己關注繪制細節(jié)。這個例子可以讓我們對 “聲明式渲染” 有一個更直觀的認知。
而在 Vue 中，開發(fā)者可以直接通過模板指令來表達 “想要什么”，并不用關心它的底層實現(xiàn)。常見的指令如 v-if、v-for、v-show 等都是同樣的作用。此外 Vue 還可以聲明式地表達對數(shù)據(jù)的渲染邏輯，例如用 {{message}} 來表示 “在此處顯示變量 message 的值”，而不用關心 message 的變量是如何被填入 DOM 對象中。
組件系統(tǒng)
每一個程序員都知道 “高內(nèi)聚 低耦合” 的編程原則，也都知道代碼復用的重要性。但在前端代碼中如何實現(xiàn) “高內(nèi)聚 低耦合”，以及前端代碼復用，并不是一件容易的事情。對于 JavaScript，尚可以使用模塊化來解決內(nèi)聚和復用的問題，但一旦涉及到結(jié)構(gòu)（HTML）和樣式，事情就不容易了。
Vue 為開發(fā)者提供了 “組件” 的概念，一個組件即一組關聯(lián)的結(jié)構(gòu)和邏輯。組件內(nèi)部可以方便地使用聲明式渲染將邏輯和結(jié)構(gòu)關聯(lián)起來，實現(xiàn)組件的高內(nèi)聚。例如 Vue 官方文檔的一個組件例子：
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
這個例子中，template 中定義了組件的結(jié)構(gòu)，并且聲明式地將 count 變量顯示到 <button> 的內(nèi)容中。在 <button> 被點擊時改變 count 的值?？梢钥吹?，組件內(nèi)部的結(jié)構(gòu)和邏輯都是非常容易互相訪問和操作的。而在組件外部，不管是 count 變量還是 <button> 結(jié)構(gòu)，都無法直接進行訪問和操作。如果需要外部進行訪問和操作，則需要定義相應的接口或者事件。這非常符合 “高內(nèi)聚 低耦合” 的思想。
組件一旦定義好之后即可被重復使用：
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
從而很好地解決前端代碼復用的問題。
客戶端路由和狀態(tài)管理
針對單頁面應用，客戶端路由的支持是必不可少的一個功能。通過客戶端路由，開發(fā)者可以根據(jù)不同的 URL 加載不同的前端組件（有時候也稱為 “頁面”），也可以允許用戶通過跳轉(zhuǎn)的形式在不同的前端組件之間跳轉(zhuǎn)。
要支持客戶端路由，首先需要對當前 URL 進行解析，獲取當前訪問的頁面地址以及參數(shù)等信息，然后根據(jù)開發(fā)者定義的路由與組件的對應關系（路由表）找到頁面地址對應的組件，并負責加載和運行組件。
Vue 官方的客戶端路由被放到一個獨立的庫 vue-router 中。開發(fā)者也可以根據(jù)需要選用。
隨著應用復雜度的上升，頁面的數(shù)據(jù)會越來越多，且同一個數(shù)據(jù)關聯(lián)多個組件的情況會越來越多。此時數(shù)據(jù)如何組織、如何定義與組件的關聯(lián)關系、如何確保變更會同步到每一個關聯(lián)的組件中就變得非常重要。此時可能就需要使用 “狀態(tài)管理” 的庫來輔助開發(fā)者進行頁面狀態(tài)的管理。
狀態(tài)管理庫會提供全局的狀態(tài)（state）對象，并定義一系列讀寫狀態(tài)的方法。組件中只要使用狀態(tài)管理提供的讀寫方法讀寫狀態(tài)即可。
Vue 官方也提供了狀態(tài)管理庫 vuex，可供復雜應用使用。
編譯 / 構(gòu)建工具
借助構(gòu)建工具的力量，Vue 還可以提供更好的開發(fā)體驗。例如基于 webpack 強大的 loader 機制，style-loader 和 css-loader 可以允許開發(fā)者在 JS 文件中直接引入 CSS 文件。
借鑒這一思路，Vue 推出了單文件組件（Single File Component，簡稱 SFC）格式.vue，即允許開發(fā)者將同一組件的結(jié)構(gòu)、樣式、邏輯全部寫在同一個文件中，然后由 vue-loader 在編譯階段將結(jié)構(gòu)和邏輯都編譯成 JS 文件，將 CSS 部分借用上述 style-loader 和 css-loader 同樣的機制掛載到頁面中。
單文件組件的推出使得 Vue 的文件組織又上一個臺階，我們可以更明確地在文件層面就定義好組件，同時由于 vue-loader 的支持，組件也可以通過各種機制（例如 npm）在不同項目間得以復用。
除了單文件組件之外，Vue 也推出了 CLI 工具 vue-cli，方便開發(fā)者更好地初始化項目、搭建項目開發(fā)環(huán)境并完成構(gòu)建工作。
總結(jié)
通過上述說明，希望大家能更好地理解 “Vue 是一個漸進式的 MVVM 框架” 的含義，它允許我們只用聲明式渲染這一點點特性，也允許我們最后加上客戶端路由和狀態(tài)管理來支持大型項目。正因為這樣的設計，使得 Vue 上手也非常容易，不用一次學習所有特性的使用。
了解 Vue 漸近式的含義，也可以讓我們在后續(xù)的源碼解讀中能清楚地知道每一章的源碼在 Vue 生態(tài)中的位置。