Vue.js，何謂漸進式框架？

由於最近重新研究Vue.js的相關資料，發現之前對於"The progressive framework"(中文：漸進式框架)有著非常大的誤解，所以就決定自己寫一篇筆記來紀錄一些相關資料。

以下是Vue官方網站的說明：

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

其實官方網站已經解釋的非常清楚了，但之前我只從字面上的意思去理解，所以從根本上就有著錯誤的認知了。按照官方及作者給出的各項資料(*註1)，基本上Vue.js的核心只關注於view layout的呈現，是提供最小化且必要的功能給予使用者。其餘相關的功能項目都可用其他函式庫或是工具去協助處理。

例如：vuex(state management)、vue-resource(ajax)、vue-router(router)。

故此，稱之為"The progressive framework"(漸進式框架)。實務上可能遇到的情形大致如下：

1. 第一階段：在現有的專案中處理一些表單資料，單純只是想使用Vue.js方便的資料綁定及表單驗證功能，這時只是取代部分Jquery或是原生的JS的功能。
2. 第二階段：假若專案進行到一定程度後，若需要將所有HTML的Dom都由Vue.js來生成，就可以完全使用其render的功能。
3. 第三階段：假如專案需要用到前端路由的功能，就可以採用vue-router的方式將該工具引入，並且針對嶄新的路由來切分各項功能。
4. 第四階段：當專案規模大到一定程度後，整個應用的狀態管理(*註2)就會變成非常棘手，因此這時候就需要用到vuex的協助來完成更為完整的管理機制。
5. 第五階段：如最後網站需要考慮到SEO的排序，可能就有必要著手開始進行Server-side render的架構。

• 註1：相關資料(http://www.infoq.com/cn/articles/vue-2-progressive-front-end-solution)
• 註2：狀態管理是指整個網頁應用程式的一些基本資料，例如：登入者的帳號名稱、登入者的基本資料等等。由於Vue的組成是由各個組件(component)所組成，因此跨組件之間的溝通就是一項麻煩的事情。一般來說可以採用"全域變數"或是其他相關方式來處理。Vue.js有提供實用的工具來處理，相關資料(https://vuejs.org/v2/guide/state-management.html)

其他參考資料：https://www.zhihu.com/question/51907207

結論：

Vue.js的核心思想是利用最小的單位並根據實際需要去堆疊出各項應用，這種思考邏輯或許就是其稱為"The progressive framework"的根本原因。本文只是單純的紀錄自己的一些心得研究，有任何錯誤請指教。