不久前，尤雨溪發(fā)布了 Vue 3.0 Beta 版本。

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

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

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

　　本文我們將通過(guò)分析 Vue 的特性，談?wù)劄槭裁瓷虡I(yè)項(xiàng)目開(kāi)發(fā)我更推薦 Vue，而不是React 和 Angular。

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

　　這個(gè)對(duì)比表應(yīng)該可以代表大部分人對(duì)于三大前端框架的理解。

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

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

　　因此，Angular 的主要問(wèn)題就是太難了，入門(mén)難、做項(xiàng)目也難，哪怕是個(gè)資深的前端工程師也會(huì)頭痛，但前期的投入換來(lái)的是后期的低維護(hù)壓力。

　　對(duì)此，網(wǎng)上專(zhuān)門(mén)有人總結(jié)了一個(gè)公式：

　　· React = Think in JS, everything is JS + Data (structure)

　　· Angular = Think in OO + Patterns (lots of) + 最佳實(shí)踐

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

　　Vue 的獨(dú)特優(yōu)勢(shì)

　　Vue 和其他前端框架相比，在結(jié)構(gòu)、樣式、業(yè)務(wù)分離等方面更清晰徹底，更符合前端多年來(lái)的編碼習(xí)慣，更符合直覺(jué)、更容易學(xué)習(xí)和維護(hù)。

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

　　一、門(mén)檻低、上手快

　　Vue 上手簡(jiǎn)單的原因是無(wú)需復(fù)雜配置，只需要一個(gè) HTML 與相關(guān)文件就能跑起來(lái)。從設(shè)計(jì)的角度上來(lái)看，Vue 考慮的也是如何降低門(mén)檻，讓只掌握了 Web 基礎(chǔ)知識(shí) (HTML, CSS, JS) 的情況下，能夠最快理解和上手，從而實(shí)現(xiàn)和完成一個(gè)應(yīng)用。

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

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

　　二、人性化，符合用戶習(xí)慣

　　React 的設(shè)計(jì)理念是提供強(qiáng)大而復(fù)雜的機(jī)制，讓開(kāi)發(fā)者來(lái)適應(yīng)我;而 Vue 則是為了更適應(yīng)開(kāi)發(fā)者的使用習(xí)慣，在很多設(shè)定上都是讓開(kāi)發(fā)者怎么爽怎么來(lái)。

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

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

　　前面我們提到了 Vue 的兩個(gè)基礎(chǔ)特性，但能成為時(shí)代的發(fā)展趨勢(shì)， 說(shuō)明 Vue 的能力遠(yuǎn)不止于此。

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

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

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

　　SpreadJS控件：https://www.grapecity.com.cn/developer/spreadjs

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

　　蘇寧易購(gòu)作為我國(guó)領(lǐng)先的 O2O 智慧零售商，在實(shí)現(xiàn)協(xié)同辦公之前處理內(nèi)部信息的辦法是：在 Excel 上安裝插件，通過(guò)插件與數(shù)據(jù)庫(kù)通信，實(shí)現(xiàn)數(shù)據(jù)權(quán)限管控，這樣做非常的低效且混亂。

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

　　極客辦公平臺(tái)界面截圖

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

　　而之所以選用 SpreadJS ，是因?yàn)樗呀?jīng)實(shí)現(xiàn)了微軟 Office Excel 90% 以上的內(nèi)置功能，開(kāi)發(fā)人員無(wú)需安裝任何軟件，只需增加一些 UI 樣式和下拉框，就可以迅速交付一套完整的基于 Web 的 Excel 功能模塊。

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

　　點(diǎn)擊此處，了解 SpreadJS與Vue集成，蘇寧集團(tuán)“極客辦公”系統(tǒng)的開(kāi)發(fā)案例。

　　為什么選擇 Vue + SpreadJS?

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

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

　　如上面蘇寧易購(gòu)的例子，在 Vue 對(duì)應(yīng)的頁(yè)面組件 mount 中重新調(diào)用初始化方法，實(shí)現(xiàn)高度類(lèi)似 Excel 的表單布局，僅需如下代碼：

　　Vue —— 契合當(dāng)下的大勢(shì)所趨

　　我們已經(jīng)在過(guò)去無(wú)數(shù)次嘗試使用 Vue 為不同的項(xiàng)目開(kāi)發(fā)了很多代碼，結(jié)果也很令人滿意(每個(gè)項(xiàng)目周期不超過(guò) 3 個(gè)月)。也許，3 個(gè)月對(duì)于后端開(kāi)發(fā)來(lái)說(shuō)算不上什么，但在JS世界里，它舉足輕重 。

　　文無(wú)第一武無(wú)第二，無(wú)謂的爭(zhēng)論誰(shuí)比誰(shuí)好并沒(méi)有什么意義，本文也并不是希望將這三個(gè)框架分個(gè)高下，而是希望可以給大家提供更多參考信息，根據(jù)自身項(xiàng)目的實(shí)際需求來(lái)選擇更適合的框架。

　　從客觀事實(shí)來(lái)說(shuō)，最具創(chuàng)新力的是 React，而最具企業(yè)級(jí)能力的是 Angular，能夠取長(zhǎng)補(bǔ)短，各項(xiàng)數(shù)據(jù)介于兩者之間的是 Vue。

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

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

　　文中資源擴(kuò)展閱讀：

　　Vue 官方文檔：https://cn.vuejs.org/v2/guide/

　　SpreadJS 官網(wǎng)：https://www.grapecity.com.cn/developer/spreadjs

　　蘇寧集團(tuán)開(kāi)發(fā)案例：https://www.grapecity.com.cn/blogs/spreadjs-system-development-case-of-suning

特別提醒：本網(wǎng)內(nèi)容轉(zhuǎn)載自其他媒體，目的在于傳遞更多信息，并不代表本網(wǎng)贊同其觀點(diǎn)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對(duì)本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時(shí)性本站不作任何保證或承諾，并請(qǐng)自行核實(shí)相關(guān)內(nèi)容。本站不承擔(dān)此類(lèi)作品侵權(quán)行為的直接責(zé)任及連帶責(zé)任。如若本網(wǎng)有任何內(nèi)容侵犯您的權(quán)益，請(qǐng)及時(shí)聯(lián)系我們，本站將會(huì)在24小時(shí)內(nèi)處理完畢。