Vue2.0 中，「漸進式框架」和「自底向上增量開發的設計」這兩個概念是什麼？

01-11

在讀 Vue2.0 文檔的時候，介紹「Vue.js（讀音 /vju?/, 類似於 view）是一套構建用戶界面的漸進式框架。與其他重量級不同的是，Vue 採用自底向上增量開發的設計。」
那麼問題來了，什麼是「漸進式框架」？什麼是「自底向上增量開發」？
可否結合 Vue 具體的談一談，謝謝！

在我看來，漸進式代表的含義是：主張最少。

每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。

比如說，Angular，它兩個版本都是強主張的，如果你用它，必須接受以下東西：

- 必須使用它的模塊機制

- 必須使用它的依賴注入

- 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免）

所以Angular是帶有比較強的排它性的，如果你的應用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會帶來一些困擾。

比如React，它也有一定程度的主張，它的主張主要是函數式編程的理念，比如說，你需要知道什麼是副作用，什麼是純函數，如何隔離副作用。它的侵入性看似沒有Angular那麼強，主要因為它是軟性侵入。

你當然可以只用React的視圖層，但幾乎沒有人這麼用，為什麼呢，因為你用了它，就會覺得其他東西都很彆扭，於是你要引入Flux，Redux，Mobx之中的一個，於是你除了Redux，還要看saga，於是你要糾結業務開發過程中每個東西有沒有副作用，純不純，甚至你連這個都可能不能忍：

const getData = () =&> {

// 如果不存在，就在緩存中創建一個並返回

// 如果存在，就從緩存中拿

}

因為你要糾結它有外部依賴，同樣是不加參數調用，連續兩次的結果是不一樣的，於是不純。

為什麼我一直不認同在中後台項目中使用React，原因就在這裡，我反對的是整個業務應用的函數式傾向，很多人都是看到有很多好用的React組件，就會傾向於把它引入，然後，你知道怎麼把自己的業務映射到函數式的那套理念上嗎？

函數式編程，無副作用，寫出來的代碼沒有bug，這是真理沒錯，但是有兩個問題需要考慮：

1. JS本身，有太多特性與純函數式的主張不適配，這一點，題葉能說得更多

2. 業務系統裡面的實體關係，如何組織業務邏輯，幾十年來積累了無數的基於設計模式的場景經驗，有太多的東西可以模仿，但是，沒有人給你總結那麼多如何把你的厚重業務映射到函數式理念的經驗，這個地方很考驗綜合水平的，真的每個人都有能力去做這種映射嗎？

函數式編程無bug的根本就在於要把業務邏輯完全都依照這套理念搞好，你看看自己公司做中後台的員工，他們熟悉的是什麼？是基於傳統OO設計模式的這套東西，他們以為拿著你們給的組件庫就得到了一切，但是可能還要被灌輸函數式編程的一整套東西，而且又沒人告訴他們在業務場景下，如何規劃業務模型、組織代碼，還要求快速開發，怎麼能快起來？

所以我真是心疼這些人，他們要的只是組件庫，卻不得不把業務邏輯的思考方式也作轉換，這個事情沒有一兩年時間洗腦，根本洗不到能開發業務的程度。

沒有好組件庫的時候，大家痛點在視圖層，有了基於React的組件化，把原先沒那麼痛的業務邏輯部分搞得也痛起來了，原先大家按照設計模式教的東西，照貓畫虎還能繼續開發了，學了一套新理念之後，都不知道怎麼寫代碼了，怎麼寫都懷疑自己不對，可怕。

我寧可支持Angular也不支持React的原因也就在此，Angular至少在業務邏輯這塊沒有軟主張，能夠跟OO設計模式那套東西配合得很好。我面對過很多商務場景，都是前端很厚重的東西，不僅僅是管理控制台這種，這類東西裡面，業務邏輯的佔比要比視圖大挺多的，如何組織這些東西，目前幾個主流技術棧都沒有解決方案，要靠業務架構師去擺平。

如果你的場景不是這麼厚重的，只是簡單管理控制台，那當我沒說好了。

框架是不能解決業務問題的，只能作為工具，放在合適的人手裡，合適的場景下。

現在我要說說為什麼我這麼支持Vue了，沒什麼，可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。你可以在底層數據邏輯的地方用OO和設計模式的那套理念，也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。

漸進式的含義，我的理解是：沒有多做職責之外的事。

我的觀點和叔叔 @徐飛比較像，我簡化的說一下，如果徐叔覺得不是一個意思那我就刪了前面那句話。

總的來說，它給你提供足夠的optional，但並不主張很多required。

我們常說：做減法比做加法難。

我覺得一個框架如果是「漸進式」的，就意味著，它本身承擔了較難的做減法的部分，而留給它的使用者較簡單的做加法的部分。

就是說，在我們用一個工具的時候，並不是為了用其中的某一個部分，而想辦法無視或者裁剪掉其他部分（做減法），而是上手就可以用上它的大多數功能，再在需要的時候引入它的官方或第三方插件（做加法）。

這樣站在使用者的視角就會更省心了，就好比給你一個空屋，通了煤水電網，有床夠睡，需要什麼自己添；亦或給你拎包入住，但住了一陣子這不滿意那不滿意。

比方說，jQuery的核心對於大多數使用者都是有用的，包括selector、事件、dom操作、class操作……因此我們不太會從一引入就開始想著要裁剪它——當然從今天的眼光看來的話也許是越來越想了2333。

湊熱鬧, Progressive 最近不是一次聽到, 直接引用原文了.. 剩下還是大神親自明確比較好:

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.

由於最近 Vue 2 也做過 Progressive Web App 方面的工作, 我原本還以為是那方面的, 看來理解偏差了. 看英文表述的也還是可以單獨用於 View, 或者深入一些加上數據層, 或者再選用官方的開發模式.

單純這樣的理解, 其實和 React 也挺像, React 本身只是 view library, 這是很明確的, 但是後來遇到問題, 逐漸成了叔叔說的那種方向, 坊間俗稱全家桶. 具體的問題就像前面是的, 不可變數據是個關鍵點. 沒寫過大應用也許不會注意到, React 的性能如果不優化實際上是非常非常差的, 上千個 DOM 節點對應的 Virtual DOM, 加上組件化當中的開銷. 而優化的方案找來找去只有一種, 不可變數據, 這是一點. 另一方面由於 React 傾向於從根節點傳入全局的數據, 然後沿著 DOM 樹分流, 導致按照業務模型做的抽象, 比如 Model Collection 被弱化了(因為 React 的 Store 某種程度上很像 ViewModel, 包含與 UI 狀態相關的一些數據), 結果總是會往 Redux 方面想. 我個人覺得同樣的問題 Vue 也會遇到, 只是說 Vue 提出的解決方案能不能避免 React 那種方向?

至於"自底向上"是不是沒翻譯好, 讀著怪怪的, 英文的 "from ground up" 不是"從頭開始"么...

我理解理念其實很簡單：框架做分層設計，每層都可選，不同層可以靈活接入其他方案。而當你都想用官方的實現時，會發現也早已準備好，各層之間包括配套工具都能比接入其他方案更便捷地協同工作。

作者在ningjs 分享中介紹過。

https://www.youtube.com/watch?v=EiTORdpGqns

視頻中有介紹自備梯子

ppt https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.g1631db019e_0_1

就是這張圖了。

以上比較官方的資料和回答不知道你是怎麼理解的。

以下是我結合實際使用場景和你分享下我的理解：

場景1：

如果你的技術團隊技術選型比較保守，沒有新技術的使用場景，比如讓你去維護一個管理後台。管理後台，日常就是提交各種表單了，這部分現有的方案，比如form表單提交或者jquery收集信息ajax提交。這時候你可以把vue 當成一個js庫來使用，就用來收集form表單，和表單驗證。

場景2：

在場景1中，你嘗到了甜頭。心中暗爽，還可以這麼玩嘞。獨樂樂不如眾樂樂和大家分享之後，團隊開始接受使用vue，小規模推廣起來。打怪升級該遇小boss啦，領導說，小伙後台做的越來越有效率了，來承擔些常規業務開發，來正規軍編製和其他小夥伴一起做新聞列表和新聞詳情頁吧。

在這個項目中，你跟大膽一點把整個頁面的dom 用Vue 來管理，你發現jquery 沒什麼用了，列表用v-for來循環，把評論抽成小組件了。評論交互比較複雜，但是你的關注點把原來jquery dom操作變成了關注數據的變化，用數據驅動DOM的變化。

場景3:

經歷了場景1 場景2，越來越受大家信賴，領導又找你了。你看新聞項目你做的不錯，移動站也得重構了，你做個移動端m站吧，正好微信和App分享出去用到。這時候，你需要在做移動端webapp了。於是你由去了解 webpack vue-router，你發現前端可以控制路由了。webpack，可以用於前端開發的工程構建。

場景4:

場景3之後你在技術團隊大放異彩，公司越來越器重你。年末領導又來找你了，小伙砸，想不想拿年終獎啊，想的話給我做個新聞直播間吧。需求特別簡單：就是滾動播報新聞，用戶實時參與評論。有了場景3和之前的經驗，發現稍微有點力不從心了，你和後端的介面溝通上越來越頻繁，新聞直播間需要大量的數據在組件中共享數據，後來你發現了，vuex 處理數據在組件之間的流動得心應手。

場景5:

年終獎，拿到手了，過年回來升職加薪。帶了20人的前端團隊，你的精力開始在配合公司其他部門做用戶數據增長了。發現場景2中你犯了個錯誤，雖然整個頁面用Vue 管理開發起來很方便，但是頁面白屏時間長，而且類似這樣的底層頁對seo都不好。開始考慮使用 vue2.0的SSR。為了保障團隊高質量的輸出，你開始研究如何給 vm寫單測...

場景1-5 從最初的只因多看你一眼而用了前端js庫，一直到最後的大型項目解決方案。能否給你說明白vue 是

The Progressive

JavaScript Framework

Progressive（漸進式的）在多個技術領域裡有不同的作用與解釋，所以有理解成本也可以意料之中的。記得好多年前接觸這個詞，印象較深的是對類似 jpeg 圖片在頁面展示的一種處理方式。我們知道，圖片的默認載入方式是從上到下，一小塊一小塊地載入，直到完全載入。而 Progressive 圖片是先載入整張圖片主體，從一開始模糊的視圖載入到清晰。這背後是基於優先展示全局整體核心，而不是「管中窺豹」的優化理念。

如：http://codinghorror.typepad.com/.a/6a0120a85dcdae970b0128776fcadb970c-pi

而這一兩年，Google 一直在推的 Progressive Web Apps（PWA），則是另外一個東西了，PWA 這個名詞可以理解為是一些技術集合的概念總稱，背後依賴於 Service Worker、Push API 等真正技術，有一點類似於 AJAX 這個命名。在 Progressive Web Apps 中，Progressive 算是相對核心的單詞，而從字面作用理解也只是強調其中一個設計原則： Progressive Enhancement（漸進增強的），即對採用的特性進行版本判斷與相關兼容，也就是說這裡的漸進性從某種程度上來說是跟進瀏覽器版本進行特性的漸進性增強使用而已。

回頭看一下 Vue 提到漸進式的框架理念，我的理解是先看到核心的部分（最小集），或者說是 Vue 這個名字的「初衷」： View，然後在此基礎上進行開發者自身的 DIY 擴展，也就是按需採用。這個過程是隨著開發者的需求逐步變化增長的，由簡單到複雜的應用場景都可以涵蓋到，正是其強大之處，其實與 React 的理念也是很像。而這與 Angular 2 之類的框架不同的是，Angular 自己提供了開發平台所需的大部分東西，你可以按需使用，但是很多理念在 Hello World 的實踐中就會接觸到了，例如 TypeScript（引入各種強類型語言的特性），路由，ngModule（Angular 自己的模塊體系），Observable (RxJS）等，這就是所謂的上手成本了，其實又有點像學習 VIM，一旦上手，開發效率（特別是團隊合作）又是杠杠的。但真正了解過這些技術的人會發現，隨著業務複雜度的增加，各類「全家桶」配件的出現，沒有哪個框架可以變成真正意義上的「輕」，到這個階段各大框架解決的問題都是比較接近的了。

其實看一下尤大對 Vue 1.0 和 Vue 2.0 定位的變化就能理解為什麼叫「漸進式框架」了。^_^

Vue 1.0 的官方定位是視圖管理，Vue 2.0 的官方定位是漸進式框架。

不邀自答，我記得尤大在某次會上專門就漸進式對Vue進行了全面的講解，大概就是你不必一開始就用Vue所有的全家桶，根據場景，官方提供了方便的框架供你使用。

Vue 2.0 所表達漸進式框架，可以去看 @尤雨溪寫的 PPT The Progressive Framework by Evan You 和 Vue作者尤雨溪：Vue 2.0，漸進式前端解決方案。

我自己的理解就是搭積木，我們可以根據需求，利用社區良好的生態，藉助已有的工具和庫搭建我們的項目，用最小、最快的成本一步步搭建。

漸進式就跟 Flow 的靜態類型檢查類似，你可以檢查原有項目的所有文件，但這樣你的改動成本肯定巨大，所以你可以只檢查你想檢查的文件，新的可以直接使用，老的可以慢慢過渡過來，甚至也可以忽略不檢查或弱檢查

我在做Vue的過程中也在不停地思考它的定位，現在，我覺得它與其他框架的區別就是漸進式的想法，也就是「Progressive」——這個詞在英文中定義是漸進，一步一步，不是說你必須一竿子把所有的東西都用上。

以上內容來自 Vue作者尤雨溪：Vue 2.0，漸進式前端解決方案

前端自學小菜雞，看到vue的介紹順手搜索了一下，應該就是說Vue可以根據開發者的實際需求來不斷漸進，而不是一口氣全部用上。大概是這個意思吧！很多教程不都喜歡用「step by step」這個詞嘛，估計也是這個意思。

還有很多VueJS相關的內容，vue.js（官方文檔）寫的很清楚了，這篇文章看完也能理解的差不多了。