Vue.JS 對比其餘框架

對比其它框架

Angular

選擇 Vue 而不選擇 Angular，有下面幾個緣由，固然不是對每一個人都適合：

• 在 API 與設計兩方面上 Vue.js 都比 Angular 簡單得多，所以你能夠快速地掌握它的所有特性並投入開發。

• Vue.js 是一個更加靈活開放的解決方案。它容許你以但願的方式組織應用程序，而不是任什麼時候候都必須遵循 Angular 制定的規則。它僅僅是一個視圖層，因此你能夠將它嵌入一個現有頁面而不必定要作成一個龐大的單頁應用。在配合其餘庫方面它給了你更大的的空間，但相應，你也須要作更多的架構決策。例如，Vue.js 核心默認不包含路由和 Ajax 功能，而且一般假定你在應用中使用了一個模塊構建系統。這多是最重要的區別。

• Angular 使用雙向綁定，Vue 也支持雙向綁定，不過默認爲單向綁定，數據從父組件單向傳給子組件。在大型應用中使用單向綁定讓數據流易於理解。

• 在 Vue.js 中指令和組件分得更清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 有本身的視圖和數據邏輯。在 Angular 中二者有很多相混的地方。

• Vue.js 有更好的性能，而且很是很是容易優化，由於它不使用髒檢查。Angular，當 watcher 愈來愈多時會變得愈來愈慢，由於做用域內的每一次變化，全部 watcher 都要從新計算。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環（digest cycle）可能要運行屢次。 Angular 用戶經常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的做用域。Vue.js 則根本沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步列隊更新，全部的數據變化都是獨立地觸發，除非它們之間有明確的依賴關係。惟一須要作的優化是在 v-for 上使用 track-by。

有意思的是，Angular 2 和 Vue 用類似的設計解決了一些 Angular 1 中存在的問題。

React

React.js 和 Vue.js 確實有一些類似 —— 它們都提供數據驅動、可組合搭建的視圖組件。固然它們也有許多不一樣。

首先，內部實現本質上不一樣。React 的渲染創建在 Virtual DOM 上——一種在內存中描述 DOM 樹狀態的數據結構。當狀態發生變化時，React 從新渲染 Virtual DOM，比較計算以後給真實 DOM 打補丁。

Virtual DOM 提供了一個函數式的方法描述視圖，這真的很棒。由於它不使用數據觀察機制，每次更新都會從新渲染整個應用，所以從定義上保證了視圖與數據的同步。它也開闢了 JavaScript 同構應用的可能性。

Vue.js 不使用 Virtual DOM 而是使用真實 DOM 做爲模板，數據綁定到真實節點。Vue.js 的應用環境必須提供 DOM。可是，相對於常見的誤解——Virtual DOM 讓 React 比其它的都快， Vue.js 實際上性能比 React 好，並且幾乎不用手工優化。而 React，爲了最優化的渲染須要到處實現 shouldComponentUpdate 和使用不可變數據結構。

在 API 方面，React（或 JSX）的一個問題是，渲染函數經常包含大量的邏輯，最終看着更像是程序片段（實際上就是）而不是界面的視覺呈現。對於部分開發者來講，他們可能以爲這是個優勢，但對那些像我同樣兼顧設計和開發的人來講，模板能讓咱們更好地在視覺上思考設計和 CSS。JSX 和 JavaScript 邏輯的混合干擾了我將代碼映射到設計的思惟過程。相反，Vue.js 經過在模板中加入一個輕量級的 DSL (指令系統)，換來一個依舊直觀的模板，且能將邏輯封裝進指令和過濾器中。

React 的另外一個問題是：因爲 DOM 更新徹底交給 Virtual DOM 管理，當想要本身控制 DOM 時就有點棘手了（雖然理論上能夠作到，可是這樣作就本質上違背了 React 的設計思想）。若是應用須要特別的自定義 DOM 操做，特別是複雜時間控制的動畫，這個限制就很討厭。在這方面，Vue.js 更靈活，有許多用 Vue.js 製做的 FWA/Awwwards 獲獎站點。

再多說幾句：

• React 團隊雄心勃勃，計劃讓 React 成爲通用平臺的 UI 開發工具，而 Vue 專一於爲 Web 提供實用的解決方案。

• React，因爲它的函數式特質，能夠很好地使用函數式編程模式。可是對於初級開發者和初學者這也致使較大的學習難度。Vue 更易學習並能快速投入開發。

• 對於大型應用，React 社區已經創造了大量的狀態管理方案，例如 Flux/Redux。Vue 自己不解決這個問題（React 內核也是），可是能夠輕鬆地修改狀態管理模式，實現一個相似的架構。Vue 有本身的狀態管理方案 Vuex，並且 Vue 也能夠與 Redux 一塊兒用。

• React 的開發趨勢是將全部東西都放在 JavaScript 中，包括 CSS。已經有許多 CSS-in-JS 方案，可是全部的方案多多少少都有它的問題。並且更重要的是，這麼作脫離了標準的 CSS 開發經驗，而且很難和 CSS 社區的已有工做配合。Vue 的 單文件組件 在把 CSS 封裝到組件模塊的同時仍然容許你使用你喜歡的預處理器。

Ember

Ember 是一個全能框架。它提供大量的約定，一旦你熟悉了它們，開發會很高效。不過，這也意味着學習曲線較高，並且不靈活。在框架和庫（加上一系列鬆散耦合的工具）之間權衡選擇。後者更自由，可是也要求你作更多的架構決定。

也就是說，最比如較 Vue.js 內核和 Ember 的模板與數據模型層：

• Vue 在普通 JavaScript 對象上創建響應，提供自動化的計算屬性。在 Ember 中須要將全部東西放在 Ember 對象內，而且手工爲計算屬性聲明依賴。

• Vue 的模板語法能夠用全功能的 JavaScript 表達式，而 Handlebars 的語法和幫助函數語法相比之下很是受限。

• 在性能上，Vue 甩開 Ember 幾條街，即便是 Ember 2.0 最新的 Glimmer 引擎。Vue 自動批量更新，在性能比較關鍵時 Ember 要手工管理循環。

Polymer

Polymer 是另外一個由 Google 支持的項目，實際上也是 Vue.js 的靈感來源之一。Vue.js 的組件能夠類比爲 Polymer 中的自定義元素，它們提供相似的開發體驗。最大的不一樣在於，Polymer 依賴最新的 Web 組件特性，在不支持的瀏覽器中，須要加載笨重的 polyfill，性能也會受到影響。相對的，Vue.js 無需任何依賴，最低兼容到IE9。

另外，在 Polymer 1.0 中，爲了性能開發團隊嚴格限制了它的數據綁定系統。例如，Polymer 模板支持的表達式僅有邏輯逆運算和簡單的方法調用。它的計算屬性實現得也不是很靈活。

最後，當發佈到生產環境時，Polymer 元素須要用專用工具 vulcanizer 打包。相比之下，單文件 Vue 組件能與 Webpack 無縫整合，於是你能夠輕鬆在組件中使用 ES6 及任意 CSS 預處理器。

Riot

Riot 2.0 提供相似的基於組件的開發模式（Riot 稱之爲「標籤」），API 小而美。我認爲 Riot 與 Vue 在設計思路上有許多相同點。不過，儘管比 Riot 重一點，Vue 提供了一些顯著優處：

• 真實的條件渲染，Riot 渲染全部的分支，而後簡單地顯示/隱藏它們。
• 一個強大得多的路由器，Riot 的路由 API 過於簡陋。
• 更成熟的工具鏈支持，見 Webpack + vue-loader。
• 過渡效果系統，Riot 沒有。
• 更佳的性能。Riot 實際上使用髒檢查而不是 Virtual DOM，於是遭受跟 Angular 同樣的性能問題。

 

http://cn.vuejs.org/guide/comparison.html#Riot