Vue.js 很好,但是比 Angular 或 React 更好嗎?

發表於2017-08-08

Vue.js 是一個用於建立 Web UI 的 JavaScript 庫。結合其他的一些工具,它也可以成為一個“框架”。通過我們的上一篇部落格,想必你已經知道 Vue.js 是頂級框架之一,並且在很多場景下已經替換了 Angular 和 React。這就引出了本文要討論的話題:‘Vue.js 很好,但是比 Angular 或 React 更好嗎?’

上一篇部落格:9 大頂級 JavaScript 框架(已更新)

如果你之前從來沒有聽說過或使用過 Vue.js,那麼你可能會想:我去,又一個 JavaScript 框架!行,朕知道了。但是,Vue.js 已經不是一個“新” 框架了。Vue.js 在 2013 年首次釋出,現在在 GitHub 上已經有 59600 顆星了,而且也有大量的下載。我們來看看下面這幾張圖:

 

Vuejs stars

 

Vuejs downloads2

因此,和其他同類框架相比,Vue.js 早已不是新秀了,但是流行度卻並不低。現在讓我們看看 Vue.js 的優勢有哪些。

相關閱讀: Angular,Vue & React:2017 將何去何從?

Vue.js 為什麼比較特別?

Vue 最大的優勢在於純正的血統。它是一個全新的框架,幾乎沒有任何歷史包袱。它從 React 和 Angular 吸取了失敗的教訓、學習了成功的經驗。正如我們看到的那樣,Vue 很輕量,而且易於學習。

Lightweight vuejs

它有一些非常基礎的文件,但是已經做的不錯了,而且和 angular 相比並沒有太多要學的東西——這是件好事,因為它看上去很強大。PageKit、Python China 是使用了 Vue 的兩個專案。這裡有一個列表(譯者注:列表在哪兒呢?給我一個完美的解釋)。而且,它還有類似於 Angular 的雙向資料繫結、類似於 React 的虛擬 DOM。

Virtual DOM vuejs

現在,我們希望你對於 Vue.js 的基礎概念已經有了一個清晰的瞭解。接下來,就讓我們拿它和 Angular、React 比較一下。我們先從 Angular 開刀。

相關閱讀: React vs Angular 2:針對你的業務應該如何選擇?

Angularjs vs Vue.js

在比較之前,讓我們先宣告一下,Angular (主要是 Angular2 釋出之後的版本!!) 就好比一頭猛獁象,Vue.js 就好比一隻飢渴難耐但是馬上就要長大的老虎。但是,對於開發者來說,有很多原因促使他們由 Angular 轉向 Vue。Vue 的作者 Even You 對原因給出了合理的解釋:

Vue.js 是一個更加靈活的、(相對於 Angular)並不那麼“專制”的解決方案。這允許你按照自己的想法來構建你的應用,而不是強制按照 Angular 規定的方式去做。它只是一個介面層,所以你可以將其作為頁面的一個功能來使用,而非一個完整的 SPA。

現在讓我們來看一些程式碼,這樣就能夠使你有一些基本的認識(來源:fadeit.dk)。

Angular vs vuejs

Vue.js vs Angularjs 總結:Angularjs 擁有很多工具,也有大量複雜的語法,以至於有時候會讓你感到困惑。另一方面,Vue.js 相對 Angular 要更加簡單,有時候甚至更好。如果你擔心這個框架的未來發展狀態,那麼我們建議你完全沒必要擔心。這種趨勢會保持很長時間,而且在未來的兩年內不會有絲毫的減弱。但是,使用 Angularjs 開發仍然是個不錯的選擇。

相關閱讀: Angular 4 is out now! Should you switch from Angular 2

Reactjs vs Vue.js

React 和 Vue.js 有一些相似的特徵。如下:

1)使用了虛擬 DOM

2)提供了響應式、可元件化的檢視元件

3)關注核心庫,像路由和全域性狀態管理則交由其他庫來處理

相關閱讀: 選擇 Facebook 的 ReactJS 的五大理由

這表明 React 和 Vue.js 在功能上是非常相似的。因此,我們將從開發者的視角通過一些簡單的程式碼來對比這兩個框架。讓我們看看在這樣的對比中會發生什麼:

Hello World:

React 實現:

Hello World React (Reactjs vs Vue.js)

Vue 實現:

Hello World vue.js (Reactjs vs Vue.js)

Vue 的實現很簡單。使用一個 script 標籤就可以執行了。優勢就是充分利用了 Vue 的特性,而不必學習新的技術。

雙向資料繫結

React 實現:

two way data binding, react (Reactjs vs Vue.js)

Vue 實現:

two way data binding, vue.js (Reactjs vs Vue.js)

在 Vue.js 中使用 v-model 雙向資料繫結會變得很簡單,而使用 React 就比較麻煩了。

迭代

React 實現:

Iteration react

Vue 實現:

Iteration vue.js

在這種情形下,Vue 因程式碼量少且簡單再次略勝一籌。

Vue.js vs Reactjs 總結:這些示例表明 Vue.js 更容易學習,並且能夠迅速提供生產力。同時,它也可以通過使用一些新的工具和模式來簡化大型程式碼庫的管理工作。Vue.js 會隨著你的知識的豐富而逐漸擴充套件,這樣的話,你就可以開始學習新的工具、進行最佳實踐。

Angularjs vs Vue.js vs Reactjs

這個表格列出了關於這三個框架的一些有用的資訊:

Angular vs react vs vue comparision

總結:

現如今 Vue 還沒有 React(由 Facebook 維護) 或 Angular(由 Google 支援) 那麼流行。但是,許多開發者正開始轉向 Vue。Laravel 社群也已經開始考慮將其作為他們首選的前端框架之一。

總之,Vue 針對 React 和 Angular 暴露的問題提供了一種解決方案,同時也提供了一種更簡單易學的方式來編寫程式碼。

相關文章