爲何 Vue 更符合這個時代的大勢所趨？

不久前，尤雨溪發佈了 Vue 3.0 Beta 版本。

發佈以後咱們對社區裏的前端開發者作了一次調查溝通，你們廣泛認爲 Vue 已經具有了商業項目開發的必備條件，如語法精煉、優雅而簡潔、代碼的可讀性高、成熟的組件模塊化可以讓開發者從編碼中得到樂趣等等，固然，還有商業項目開發最爲看重的與第三方控件的結合能力。

正是這些能力，確保了「後浪」 Vue 可以與 React、Angular 等老牌前端開發框架並駕齊驅，在國內開發者當中佔據愈來愈重要的位置，逐漸有發展成爲國內三大前端框架之首的趨勢。

不過，在讀者看來，Vue 做爲近幾年發展最快的 JS 框架， 其崛起主要緣由不僅僅是由於粉絲的過分追捧，也並非由於某個大公司的權威推進。和 React、Angular 相比，Vue 在可讀性、可維護性和趣味性之間作到了很好的平衡，結合咱們以前爲你們推薦過的純前端表格控件 SpreadJS，有用戶表示僅經過一週的自學就搞出來了一個可供企業內部使用的表格協同文檔系統。

本文咱們將經過分析 Vue 的特性，談談爲何商業項目開發我更推薦 Vue，而不是 React 和 Angular。

Vue、React、Angular 優點對比

這個對比表應該能夠表明大部分人對於三大前端框架的理解。

React 的靈活性很高，這就決定了它的上限也很高。但 React 相對於 Vue，規矩更多，爲了讓項目代碼等規矩更有條理性，須要更多的代碼來實現，假若有一天咱們再也不依賴一大堆 npm 包和 ES5 編譯器，要作出 React 應用簡直是難如登天。

而相比 React 所強調的所謂 JS 純淨性和代碼可讀性，Angular 的確算得上一款優秀的前端框架。Angular 能夠幫助咱們快速進入開發，在代碼的頭一千行，咱們會感到頗有趣，但在那以後，代碼將開始變得糟糕起來。大部分時間，你都會迷失在各類指令和做用域裏，代碼管理難度將會勸退大部分新來的開發人員。

所以，Angular 的主要問題就是太難了，入門難、作項目也難，哪怕是個資深的前端工程師也會頭痛，但前期的投入換來的是後期的低維護壓力。

對此，網上專門有人總結了一個公式：

React = Think in JS, everything is JS + Data (structure)
Angular = Think in OO + Patterns (lots of) + 最佳實踐

Vue 很好的借鑑了兩者的設計理念，並融會貫通。對於大部分開發者來講，它優雅而簡潔，可讓咱們把注意力集中在解決問題，而非代碼邏輯上。

Vue 的獨特優點

Vue 和其餘前端框架相比，在結構、樣式、業務分離等方面更清晰完全，更符合前端多年來的編碼習慣，更符合直覺、更容易學習和維護。

入門很是容易，資料豐富，框架功能完善，加入很是多的特性，例如，if, for, async,爲開發者節省不少垃圾代碼。模板支持 html 和 jsx，支持自定義指令，方便操做 dom 的一致行爲。

1、門檻低、上手快

Vue 上手簡單的緣由是無需複雜配置，只須要一個 HTML 與相關文件就能跑起來。從設計的角度上來看，Vue 考慮的也是如何下降門檻，讓只掌握了 Web 基礎知識 (HTML, CSS, JS) 的狀況下，可以最快理解和上手，從而實現和完成一個應用。

和 React、Angular 相比，Vue 的中文文檔是寫的最好的，再加上國內有很是豐富的視頻、圖文教程、各類開源的插件，哪怕是一個新手前端開發，學習一週左右就能夠搞一個項目出來。就如咱們開頭所說，配合第三方前端表格控件 SpreadJS，自學一週就能作出一個企業級的表格協同文檔。因此，它對於非專業前端，或者前端入門人士來講是很是適合的。

其次，Vue 設定多，因此須要思考的就少。屬性指令定義了一大堆，API 文檔整理好的就在那裏，須要什麼一查，最佳實踐的 demo 寫好了放在那邊，照着寫就 OK 了。

2、人性化，符合用戶習慣

React 的設計理念是提供強大而複雜的機制，讓開發者來適應我；而 Vue 則是爲了更適應開發者的使用習慣，在不少設定上都是讓開發者怎麼爽怎麼來。

好比 Vue 的 API 跟傳統 Web 開發者熟悉的模板契合度很是高。Vue 的單文件組件是以模板+JavaScript+CSS 的組合模式呈現，它跟 Web 現有的 HTML、JavaScript、CSS 可以更好地配合；Vue 提供反應式的數據，當數據改動時，界面就會自動更新，而 React 裏面則還須要調用方法 SetState。

3、Vue + 第三方控件 = 效率高 & 使用便利 & 組件化架構

前面咱們提到了 Vue 的兩個基礎特性，但能成爲時代的發展趨勢，說明 Vue 的能力遠不止於此。

從咱們團隊嘗試使用 Vue 的狀況來看，Vue 使用起來異常簡單，它從 React 那裏借鑑了組件化、prop、單向數據流、性能、虛擬渲染，並意識到狀態管理的重要性，並從 Angular 那裏借鑑了模板，並賦予了更好的語法，以及雙向數據綁定（在單個組件裏），它不強制使用某種編譯器，因此你徹底能夠在遺留代碼裏使用 Vue，並對以前亂糟糟的 jQuery 代碼進行改造。

即使，仍然有不少人認爲 Vue 只適合開發簡單的網站或者單頁面應用，但其實 Vue 有着比 React 和 Angular 更爲豐富多元的第三方控件資源。配合這些資源使用，Vue 作企業級項目甚至比其餘框架來的更加便利高效。

這裏咱們仍是用第三方控件 SpreadJS 舉例，看看蘇寧易購是如何在短短一週內，搭建並上線一個企業級的表格協同文檔系統的。

經過嵌入 SpreadJS 在線編輯器，開發的系統界面

蘇寧易購做爲我國領先的 O2O 智慧零售商，在實現協同辦公以前處理內部信息的辦法是：在 Excel 上安裝插件，經過插件與數據庫通訊，實現數據權限管控，這樣作很是的低效且混亂。

爲了提高效率實現真正的協同辦公，它們採購了 SpreadJS 純前端表格控件，爲其構建基於 Web 端 + Vue 集成的 Excel 數據管理系統 —— 「極客辦公平臺」。

極客辦公平臺界面截圖

之因此選用 Vue 做爲前端框架，是由於 Vue 自己經過提供現成的範式讓整個項目的搭建過程更加快捷。題外話：其實在選擇 Vue 以前，項目組已經嘗試過 React 框架，可是一次又一次的整理prop和重構微組件的過程讓其痛不欲生。

而之因此選用 SpreadJS ，是由於它已經實現了微軟 Office Excel 90% 以上的內置功能，開發人員無需安裝任何軟件，只需增長一些 UI 樣式和下拉框，就能夠迅速交付一套完整的基於 Web 的 Excel 功能模塊。

據蘇寧易購系統架構師候健的分享所述，爲保證新老系統順利過渡，須要投入人力，完成大量的 Excel 數據遷移工做，所以，新老系統對 Excel 文件的兼容性相當重要。而藉助 SpreadJS 純前端無損導入導出 Excel 這一產品特性，極客辦公平臺才得以順利完成交付並迅速投入使用。

點擊此處，瞭解 SpreadJS 與 Vue 集成，蘇寧集團「極客辦公」系統的開發案例。

爲何選擇 Vue + SpreadJS？

使用 Vue + SpreadJS 能夠快速搭建一套在線協同表格文檔，不管是對於文檔的性能、項目研發效率，以及後期維護成本和新老系統數據遷移成原本說，它們都是一對「最佳拍檔」。

SpreadJS 提供了類 Excel 的操做界面和開放的 API，將其嵌入系統，可快速實現 Excel 導入導出、公式計算、在線填報數據、打印報送、實時預覽、數據校驗、服務端數據交互等功能，經過對其二次擴展，能夠將 SpreadJS 做爲在線文檔協同編輯系統的核心模塊，知足多人協做、實時編輯、數據同步、多級上報、歷史查詢等業務需求。通過實測，藉助 Vue + SpreadJS，能夠實現用不到 100 行代碼，將 Excel 的功能和使用體驗完美嵌入到在線文檔系統中。

如上面蘇寧易購的例子，在 Vue 對應的頁面組件 mount 中從新調用初始化方法，實現高度相似 Excel 的表單佈局，僅需以下代碼：

Vue —— 契合當下的大勢所趨

咱們已經屢次嘗試使用 Vue 爲不一樣的項目開發了不少代碼，結果也很使人滿意（每一個項目週期不超過 3 個月）。也許，3 個月對於後端開發來講算不上什麼，但在 JS 世界裏，它舉足輕重 。

文無第一武無第二，無謂的爭論誰比誰好並無什麼意義，本文也並非但願將這三個框架分個高下，而是但願能夠給你們提供更多參考信息，根據自身項目的實際需求來選擇更適合的框架。

從客觀事實來講，最具創新力的是 React，而最具企業級能力的是 Angular，可以取長補短，各項數據介於二者之間的是 Vue。

正是由於 Vue 具有門檻低、易上手、人性化、效率高等特色，外加有着最爲豐富的中文資源和諸如 SpreadJS 等優秀的第三方控件加持，開發者們得以實現項目的「短平快」開發。在這個追求「快速」和「變化」的時代，這款前端框架的定位明顯更契合時代的主流需求。

即使 Vue 的做者尤雨溪曾屢次表示，若是多年之後要論歷史地位，React 確定是高於 Vue 的。不過歷史地位並非開發者須要考慮的問題，咱們能夠爲某一個編程語言、某一種框架的社區發展貢獻力量，但在實際的項目中，不能盲目的被束縛住。

交流

喜歡本文的，麻煩點贊，收藏，轉發啦，在學習web前端的過程當中，每每由於沒有資料或者沒人指導從而導本身不想學，所以我特地準備了個羣545667817，配套資料能夠找管理小姐姐領取！無論是學習到哪一個階段的小夥伴均可以獲取到本身相對應的資料，點贊收藏進羣的小夥伴還有機會獲取實體web前端學習書籍，感謝支持！！！

原做者姓名：徐九

原出處：segmentfault

原文連接： segmentfault.com/a/119000002…