SpreadJS是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業(yè)用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發(fā)、表格文檔協同編輯、數據填報、Excel 類報表設計等業(yè)務場景，極大降低了企業(yè)研發(fā)成本和項目交付風險。

點擊下載SpreadJS最新試用版

Vue 3.0 Beta 發(fā)布之后我們對社區(qū)里的前端開發(fā)者做了一次調查溝通，大家普遍認為 Vue 已經具備了商業(yè)項目開發(fā)的必備條件，如語法精煉、優(yōu)雅而簡潔、代碼的可讀性高、成熟的組件模塊化能夠讓開發(fā)者從編碼中獲得樂趣等等，當然，還有商業(yè)項目開發(fā)最為看重的與第三方控件的結合能力。

正是這些能力，確保了“后浪” Vue 能夠與 React、Angular 等老牌前端開發(fā)框架并駕齊驅，在國內開發(fā)者當中占據越來越重要的位置，逐漸有發(fā)展成為國內三大前端框架之首的趨勢。

不過，在讀者看來，Vue 作為近幾年發(fā)展最快的 JS 框架， 其崛起主要原因不單單是因為粉絲的過度追捧，也并不是因為某個大公司的權威推動。和 React、Angular 相比，Vue 在可讀性、可維護性和趣味性之間做到了很好的平衡，結合我們之前為大家推薦過的純前端表格控件 SpreadJS，有用戶表示僅通過一周的自學就搞出來了一個可供企業(yè)內部使用的表格協同文檔系統(tǒng)。

本文我們將通過分析 Vue 的特性，談談為什么商業(yè)項目開發(fā)我更推薦 Vue，而不是React 和 Angular。

Vue、React、Angular 優(yōu)勢對比

這個對比表應該可以代表大部分人對于三大前端框架的理解。

React 的靈活性很高，這就決定了它的上限也很高。但 React 相對于 Vue，規(guī)矩更多，為了讓項目代碼等規(guī)矩更有條理性，需要更多的代碼來實現，假如有一天我們不在依賴一大堆npm包和ES5編譯器，要做出React應用簡直是難如登天。

而相比 React 所強調的所謂JS純凈性和代碼可讀性，Angular 的確算得上一款優(yōu)秀的前端框架。Angular 可以幫助我們快速進入開發(fā)，在代碼的頭一千行，我們會感到很有趣，但在那之后，代碼將開始變得糟糕起來。大部分時間，你都會迷失在各種指令和作用域里，代碼管理難度將會勸退大部分新來的開發(fā)人員。

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

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

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

Vue 很好的借鑒了二者的設計理念，并融會貫通。對于大部分開發(fā)者來說，它優(yōu)雅而簡潔，可以讓我們把注意力集中在解決問題，而非代碼邏輯上。

Vue 的獨特優(yōu)勢

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

入門非常容易，資料豐富，框架功能完善，加入非常多的特性，例如，if, for, async,為開發(fā)者節(jié)省很多垃圾代碼。模板支持 html 和 jsx，支持自定義指令，方便操作 dom 的一致行為。

一、門檻低、上手快

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

和 React、Angular 相比，Vue 的中文文檔是寫的最好的，再加上國內有非常豐富的視頻、圖文教程、各種開源的插件，哪怕是一個新手前端開發(fā)，學習一周左右就可以搞一個項目出來。就如我們開頭所說，配合第三方前端表格控件 SpreadJS，自學一周就能做出一個企業(yè)級的表格協同文檔。所以，它對于非專業(yè)前端，或者前端入門人士來說是非常適合的。

其次，Vue 設定多，所以需要思考的就少。屬性指令定義了一大堆，API 文檔整理好的就在那里，需要什么一查，最佳實踐的 demo 寫好了放在那邊，照著寫就 OK 了。

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

React 的設計理念是提供強大而復雜的機制，讓開發(fā)者來適應我；而 Vue 則是為了更適應開發(fā)者的使用習慣，在很多設定上都是讓開發(fā)者怎么爽怎么來。

比如 Vue 的 API 跟傳統(tǒng) Web 開發(fā)者熟悉的模板契合度非常高。Vue 的單文件組件是以模板+JavaScript+CSS 的組合模式呈現，它跟 Web 現有的 HTML、JavaScript、CSS 能夠更好地配合；Vue 提供反應式的數據，當數據改動時，界面就會自動更新，而 React 里面則還需要調用方法 SetState。

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

前面我們提到了 Vue 的兩個基礎特性，但能成為時代的發(fā)展趨勢， 說明 Vue 的能力遠不止于此。

從我們團隊使用 Vue 的情況來看，Vue 使用起來異常簡單，它從 React 那里借鑒了組件化、prop、單向數據流、性能、虛擬渲染，并意識到狀態(tài)管理的重要性，并從 Angular 那里借鑒了模板，并賦予了更好的語法，以及雙向數據綁定（在單個組件里），它不強制使用某種編譯器，所以你完全可以在遺留代碼里使用Vue，并對之前亂糟糟的jQuery代碼進行改造。

 即便，仍然有很多人認為 Vue 只適合開發(fā)簡單的網站或者單頁面應用，但其實 Vue 有著比 React 和 Angular 更為豐富多元的第三方控件資源。配合這些資源使用，Vue 做企業(yè)級項目甚至比其他框架來的更加便利高效。

這里我們還是用第三方控件 SpreadJS 舉例，看看蘇寧易購是如何在短短一周內，搭建并上線一個企業(yè)級的表格協同文檔系統(tǒng)的。

（通過嵌入 SpreadJS 在線編輯器，開發(fā)的系統(tǒng)界面）

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

為了提升效率實現真正的協同辦公，它們采購了 SpreadJS 純前端表格控件，為其構建基于 Web 端 + Vue 集成的 Excel 數據管理系統(tǒng) —— 「極客辦公平臺」。

（極客辦公平臺界面截圖）

之所以選用 Vue 作為前端框架，是因為 Vue 本身通過提供現成的范式讓整個項目的搭建過程更加快捷。題外話：其實在選擇 Vue 之前，項目組已經嘗試過 React 框架，但是一次又一次的整理prop和重構微組件的過程讓其痛不欲生。

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

據蘇寧易購系統(tǒng)架構師候健的分享所述，為保證新老系統(tǒng)順利過渡，需要投入人力，完成大量的 Excel 數據遷移工作，因此，新老系統(tǒng)對 Excel 文件的兼容性至關重要。而借助 SpreadJS 純前端無損導入導出 Excel 這一產品特性，極客辦公平臺才得以順利完成交付并迅速投入使用。

為什么選擇 Vue + SpreadJS？

 使用 Vue + SpreadJS 可以快速搭建一套在線協同表格文檔，無論是對于文檔的性能、項目研發(fā)效率，以及后期維護成本和新老系統(tǒng)數據遷移成本來說，它們都是一對“最佳拍檔”。

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

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

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

我們已經在過去無數次嘗試使用 Vue 為不同的項目開發(fā)了很多代碼，結果也很令人滿意（每個項目周期不超過 3 個月）。也許，3 個月對于后端開發(fā)來說算不上什么，但在JS世界里，它舉足輕重 。

文無第一武無第二，無謂的爭論誰比誰好并沒有什么意義，本文也并不是希望將這三個框架分個高下，而是希望可以給大家提供更多參考信息，根據自身項目的實際需求來選擇更適合的框架。

 從客觀事實來說，最具創(chuàng)新力的是 React，而最具企業(yè)級能力的是 Angular，能夠取長補短，各項數據介于兩者之間的是 Vue。

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

即便 Vue 的作者尤雨溪曾多次表示，如果多年以后要論歷史地位，React 肯定是高于 Vue 的。不過歷史地位并不是開發(fā)者需要考慮的問題，我們可以為某一個編程語言、某一種框架的社區(qū)發(fā)展貢獻力量，但在實際的項目中，不能盲目的被束縛住。

今天的內容就到這了，不要忘了在評論區(qū)留下的意見和建議！現電子表格控件SpreadJS正版授權限時優(yōu)惠！低至3490；企業(yè)版最高立減6000元。點擊了解更多優(yōu)惠！