Vue.js 是一個(gè)用來構(gòu)建網(wǎng)頁界面的 JavaScript 庫(kù)。同其它的一些工具結(jié)合在一起，它也可以成為一個(gè)新“框架”。通過閱讀我們最近一次在 ValueCoders 上發(fā)表的 文章, 你會(huì)了解到 Vue.js 是頂級(jí)的 JavaScript 框架之一，它在許多場(chǎng)景中可以被用來替換 Angular 和 React。這就引出了本文要討論的話題 “Vue.js 是不錯(cuò)，但能比 Angular 或者 React 更好么?”

相關(guān)文章: 為什么 JavaScript 編程語言是 Web 開發(fā)的未來趨勢(shì)?

討論之前，你可能從未聽說或使用過 Vue.js，然后會(huì)尋思: 別鬧了！也就是又一個(gè) JavaScript 框架而已！我們考慮到了這個(gè)，不過，Vue.js 并不是一個(gè)新事物。它首次發(fā)布是在 2013 年，到如今在 GitHub 上已經(jīng)收獲了 31473 次收藏，下載量也很大。來看看下面這兩張圖片：

因此同其它框架相比，Vue.js 并不新，但其每個(gè)生命周期間的流行度卻不會(huì)遜色?，F(xiàn)在讓我們來看看 Vue.js 的優(yōu)勢(shì)是什么。

Vue.js 為什么比較特別?

Vue 最大優(yōu)勢(shì)就是它比較新穎，沒歷史包袱。在 ValueCoders 上進(jìn)行了深入全面的研究之后，我們發(fā)現(xiàn)它吸取了 React 和 Angular 的教訓(xùn)，同時(shí)也吸收了它們的成功之處。我們看到的 Vue 是輕量級(jí)且容易學(xué)習(xí)掌握的。

它有一些相當(dāng)基礎(chǔ)的文檔，不過這已經(jīng)不錯(cuò)了，而且同 Angular 相比，并沒有多少要學(xué)的東西 – 這是件好事兒，因?yàn)榭瓷先?qiáng)大也容易讓人心生畏懼。PageKit, Python China 是兩個(gè)使用了 Vue 的項(xiàng)目。這里有一份清單。它還擁有類似 Angular 的雙向數(shù)據(jù)綁定，以及類似 React 的虛擬DOM。

現(xiàn)在，我想你已經(jīng)對(duì) Vue.js 的基礎(chǔ)概念已經(jīng)有了一定的了解。接下來讓我們拿他同 Angular 以及 React 進(jìn)行對(duì)比，先從 Angular 開始。

Angularjs vs Vue.js

在比較這兩者時(shí)，我們首先定性一下， 如果把 Angular (主要是Angular 2 發(fā)布之后的版本) 比作一頭猛犸象， 而 Vue.js 則是一頭已經(jīng)很餓，很快就能變強(qiáng)大的老虎。然而，許多原因都會(huì)導(dǎo)致開發(fā)人員偏向 Vue。Evan You 做為 Vue 的擁有者對(duì)原因進(jìn)行了正確的描述：

Vue.js 更加靈活，（比起 Angular）更少專制，它能然你按照自己想要的方式構(gòu)建應(yīng)用，而非凡事非得 Angular 如此如此。它只不過是一層界面而已，因此你可以拿它作為頁面中一個(gè)輕量的功能來使用，而不是一個(gè)完整的 SPA。

現(xiàn)在看看下面幾行代碼可以讓你對(duì)此有一些基礎(chǔ)的認(rèn)識(shí) (來源: fadeit.dk)。

Angularjs vs Vue.js 概要：Angularjs 擁有許多工具，而如此多的復(fù)雜語法有時(shí)也會(huì)讓你感到迷惑。另外一方面，Vue.js 比起 Angular 要簡(jiǎn)單的多，甚至于要更好。如果你是在擔(dān)心這個(gè)框架的未來流行趨勢(shì)，我認(rèn)為你不必想那么多。它是需要長(zhǎng)時(shí)間堅(jiān)持下去的，而且在未來兩年，無論如何都是不會(huì)過時(shí)。

Reactjs vs Vue.js

React 和 Vue.js 擁有一些類似的功能特性，如:

1) 使用了一個(gè)虛擬 DOM
2) 提供了響應(yīng)式的，并且可組合式的視圖組件。
3) 保持對(duì)核心庫(kù)的專注, 而像路由和全局狀態(tài)管理這樣的關(guān)注點(diǎn)則交給附帶的庫(kù)來處理。

相關(guān)文章: 選擇 Facebook 的 ReactJS 的 5 大理由

這個(gè)說明了 React 和 Vue.js 在功能上是相當(dāng)類似的。因此我們想從開發(fā)人員的角度，用幾個(gè)簡(jiǎn)單的操作來試試每個(gè)框架，通過這樣做來對(duì)這兩個(gè)框架進(jìn)行一下對(duì)比，看看會(huì)發(fā)生什么!

Hello World:

React 這樣做:

Vue 這樣做:

這個(gè)很簡(jiǎn)單。使用一堆 script 標(biāo)簽就可以讓代碼跑起來。從這里可以看出，利用 Vue 的功能特性的好處就是無需學(xué)習(xí)任何新的技術(shù)。

雙向數(shù)據(jù)綁定

React 這樣做:

Vue 這樣做:

Vue.js 中的雙向數(shù)據(jù)綁定在你使用了 v-model 時(shí)就會(huì)相當(dāng)?shù)暮?jiǎn)單。而在 React 中, 過程就比較漫長(zhǎng)了。

迭代

React 這樣做:

Vue 這樣做:

在這里 ，Vue 的優(yōu)勢(shì)也是代碼更少更簡(jiǎn)單。

Reactjs vs Vue.js 概要: 這些示例所要表明的意思就是 Vue.js 更容易學(xué)習(xí)，而且可以快速形成生產(chǎn)力。它還提供了一條途徑，使用新的工具和模式來簡(jiǎn)化大型代碼庫(kù)的管理工作。Vue.js 會(huì)隨著你知識(shí)的日漸豐富而不斷擴(kuò)展，因此你可以利用它來學(xué)習(xí)最新的工具以及進(jìn)行最佳的實(shí)踐。

概要:

現(xiàn)在， Vue 還沒有 React (由 Facebook 維護(hù)) 或者 Angular 2 (受到 Google 的支持) 流行。不過，許多開發(fā)者都已經(jīng)轉(zhuǎn)向 Vue 了。Laravel 社區(qū)也在考慮將它作為可選用的前端框架之一。

總之，Vue 給 React & Angular 的弊病提供了一道良方，為你提供了一種更加簡(jiǎn)單和輕松的方法來編寫代碼。

本文原來被發(fā)表在 ValueCoders 上。