那么對(duì)于 Angular 和 React.js ，開發(fā)者該如何選擇呢？

下面我們會(huì)對(duì)這兩種框架進(jìn)行介紹和深度對(duì)比。

Vue.js 是前 Google 員工 Evan You 的開發(fā)的，并于2014年發(fā)布，現(xiàn)已獲得了超過57,000個(gè) GitHub star。許多開發(fā)人員都大力推薦 Vue，因?yàn)樗苋菀讓W(xué)習(xí)。如果你有深厚的 HTML、CSS 和 JavaScript 基礎(chǔ)，那么學(xué)習(xí) Vue.js 只需幾個(gè)小時(shí)。

Vue 對(duì)開發(fā)人員最有吸引力的地方是：它的新穎、輕便，而且復(fù)雜性很少甚至沒有。Vue 不但非常靈活簡(jiǎn)單，而且還非常強(qiáng)大，同時(shí)還提供雙向數(shù)據(jù)綁定功能，就像 Angular 和 React 的虛擬 DOM 功能一樣。

Vue 可以幫助開發(fā)人員以任何想要的方式來構(gòu)建應(yīng)用程序，這是 Angular 做不到的。

Vue.js - 多樣化的 JavaScript 框架

作為一個(gè)跨平臺(tái)的，高度進(jìn)步的框架，Vue 成為了許多需要?jiǎng)?chuàng)建單頁應(yīng)用程序的開發(fā)人員的首選。在用于開發(fā) Web 應(yīng)用程序的典型 MVC 體系結(jié)構(gòu)中，Vue 充當(dāng)了 View，這意味著它可以讓開發(fā)者看到數(shù)據(jù)的顯示部分。除了上面提到的基本功能之外，Vue 還有許多其它優(yōu)秀功能。

我們來看看這些：

1. 容易使用

如果你一直在使用其它框架，那么你可以輕松使用 Vue，因?yàn)?Vue 的核心庫專注于 View 層，你可以輕松地將其與第三方庫進(jìn)行整合并與現(xiàn)有項(xiàng)目一起使用。

2. 輕便

由于 Vue 主要關(guān)注于 ViewModel 或雙向數(shù)據(jù)綁定，因此 Vue 很輕便。Vue 也具有十分基礎(chǔ)的文檔。Vue 用做 View 層，意味著開發(fā)者可以將它用作頁面中的亮點(diǎn)功能，比起全面的 SPA，Vue 提供了更好的選擇。

3. 學(xué)習(xí)曲線很低

熟悉 HTML 的開發(fā)人員會(huì)發(fā)現(xiàn) Vue 的學(xué)習(xí)曲線很低，同時(shí)對(duì)于經(jīng)驗(yàn)較少的開發(fā)人員和初學(xué)者來說，也能夠快速地學(xué)習(xí)和理解 Vue。

4. 雙向綁定

Vue 提供了 v-model 指令（用于更新用戶輸入事件的數(shù)據(jù)），使得在表單輸入和結(jié)構(gòu)元素上實(shí)現(xiàn)雙向綁定變得很容易。它可以選擇正確的方式來更新輸入類型相關(guān)的元素。

5. 虛擬 DOM

由于 Vue 是基于 Snabbdom 的輕量級(jí)虛擬 DOM 實(shí)現(xiàn)，因此 Vue 的性能有些許的提升。這是虛擬 DOM 的主要新功能之一，開發(fā)者可以直接進(jìn)行更新。當(dāng)你需要在實(shí)際的 DOM 中進(jìn)行更改時(shí)，只需執(zhí)行一次這樣的更新功能。

6. 基于 HTML 模板的語法

Vue 允許開發(fā)者直接將渲染的 DOM 綁定到底層的Vue實(shí)例數(shù)據(jù)上。這是一個(gè)很有用的功能，因?yàn)樗梢宰岄_發(fā)者擴(kuò)展基本的 HTML 元素，來保存可復(fù)用的代碼。

Angular：動(dòng)態(tài)框架

Angular 是一個(gè)功能齊全的框架，支持 Model-View-Controller 編程結(jié)構(gòu)，非常適合構(gòu)建動(dòng)態(tài)的單頁網(wǎng)絡(luò)應(yīng)用程序。

谷歌在2009年開發(fā)出了 Angular 并對(duì)其提供支持，Angular 包含一個(gè)基于標(biāo)準(zhǔn) JavaScript 和 HTML 的 JS 代碼庫。Angular 設(shè)計(jì)的最初目的是作為一個(gè)使設(shè)計(jì)者能夠與后端和前端進(jìn)行交互的工具。

以下是 Angular 的部分最好的功能：

1. Model-View-ViewModel（MVVM）

為了構(gòu)建客戶端Web應(yīng)用程序，Angular 將原始 MVC 軟件設(shè)計(jì)模式背后的基本原理結(jié)合在一起。然而，Angular 沒有實(shí)現(xiàn)傳統(tǒng)意義上的 MVC，而是實(shí)現(xiàn)了 MVVM 即 Model-View-ViewModel 模式。

2. 依賴注入

Angular 帶有內(nèi)置的依賴注入子系統(tǒng)功能，這使得應(yīng)用程序易于開發(fā)和測(cè)試。依賴注入允許開發(fā)者通過請(qǐng)求來獲得依賴關(guān)系，而不是搜索依賴關(guān)系。這對(duì)開發(fā)人員非常有幫助。

3. 測(cè)試

在 Angular 中，可以單獨(dú)對(duì)控制器和指令進(jìn)行單元測(cè)試。Angular 允許開發(fā)人員進(jìn)行端到端和單元測(cè)試運(yùn)行器設(shè)置，這意味著也可以從用戶角度進(jìn)行測(cè)試。

4. 跨瀏覽器兼容

Angular 的一個(gè)有趣功能是，框架中編寫的應(yīng)用程序在多個(gè)瀏覽器都能運(yùn)行良好。Angular 可以自動(dòng)處理每個(gè)瀏覽器所需的代碼。

5. 指令

Angular 的指令（用于渲染指令的DOM模板） 可用于創(chuàng)建自定義的 HTML 標(biāo)記。這些是 DOM 元素上的標(biāo)記，因?yàn)殚_發(fā)者可以擴(kuò)展指令詞匯表并制作自己的指令，或?qū)⑺鼈冝D(zhuǎn)換為可重用組件。

6. Deep Linking

由于 Angular 主要用于制作單頁應(yīng)用程序，因此必須利用 Deep Linking 功能才能在同一頁面上加載子模板。Deep Linking 的目的是為了查看位置 URL 并安排它映射到頁面的當(dāng)前狀態(tài)。

Deep Linking 功能通過查看頁面狀態(tài)并將用戶帶到特定內(nèi)容，而不是從主頁中遍歷應(yīng)用程序來設(shè)置 URL。Deep Linking 允許所有主要搜索引擎，可以輕松的搜索網(wǎng)絡(luò)應(yīng)用程序。

Vue.js 與 Angular--哪一個(gè)最好？

究竟哪個(gè)框架是最好的 - Angular 還是 Vue？下面我們通過以下幾點(diǎn)來深入研究：

學(xué)習(xí)曲線

在學(xué)習(xí)曲線方面，Vue.js 的學(xué)習(xí)和理解相對(duì)簡(jiǎn)單，而 Angular 則需要時(shí)間去習(xí)慣。開發(fā)人員認(rèn)為這兩個(gè)框架對(duì)于項(xiàng)目來說都很棒，但開發(fā)者中的大多數(shù)人更喜歡使用 Vue，因?yàn)楫?dāng)將 Vuex 添加到項(xiàng)目中時(shí)，Vue 更加簡(jiǎn)單并且可以很好地?cái)U(kuò)展 。

盡管 Vue 和 Angular 的一些語法類似，比如 API 和設(shè)計(jì)（這是因?yàn)?Vue 實(shí)際上是從 Angular 的早期開發(fā)階段中獲得啟發(fā)的），但 Vue 一直致力于在一些對(duì)于 Angular 來說很困難的方面提升自己 。開發(fā)者可以在幾個(gè)小時(shí)內(nèi)用 Vue.js 構(gòu)建一個(gè)特別的應(yīng)用程序，但是這對(duì) Angular 來說是不可能的。

靈活性

Angular 是獨(dú)立的，這意味著你的應(yīng)用程序應(yīng)該有一定的構(gòu)造方式。Vue 則更加寬泛，Vue 為創(chuàng)建應(yīng)用程序提供了模塊化，靈活的解決方案。

很多時(shí)候，Vue 被認(rèn)為是一個(gè)庫而不是框架。默認(rèn)情況下，Vue 不包含路由器，HTTP 請(qǐng)求服務(wù)等。開發(fā)者必須安裝所需的“插件”。Vue 非常靈活并且可以與大多數(shù)開發(fā)者想要使用的庫兼容。

不過，也有開發(fā)人員更喜歡 Angular，因?yàn)?Angular 為其應(yīng)用程序的整體結(jié)構(gòu)提供了支持。這有助于節(jié)省編碼時(shí)間。

文檔對(duì)象模型（DOM）

Vue 通過最少量的組件重新渲染，可以將模板預(yù)編譯為純 JavaScript。這個(gè)虛擬 DOM 允許進(jìn)行大量的優(yōu)化，這是 Vue 和 Angular 之間的主要區(qū)別。Vue 允許使用更簡(jiǎn)單的編程模型，而 Angular 則以跨瀏覽器兼容的方式操作 DOM。

速度/性能

雖然 Angular 和 Vue 都提供了很高的性能，但由于 Vue 的虛擬 DOM 實(shí)現(xiàn)的重量較輕，所以可以說 Vue 的速度/性能略微領(lǐng)先。

更簡(jiǎn)單的編程模型使 Vue 能夠提供更好的性能。Vue 可以在沒有構(gòu)建系統(tǒng)的情況下使用，因?yàn)殚_發(fā)者可以將其包含在 HTML 文件中。這使得 Vue 易于使用，從而提高了性能。

Angular 可能會(huì)很慢的原因是它使用臟數(shù)據(jù)檢查，這意味著 Angularmonitors 會(huì)持續(xù)查看變量是否有變化。

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

這兩個(gè)框架均支持雙向數(shù)據(jù)綁定，但與 Vue.js 相比，Angular 的雙向綁定更加復(fù)雜。Vue 中的雙向數(shù)據(jù)綁定非常簡(jiǎn)單，而在 Angular 中，數(shù)據(jù)綁定更加簡(jiǎn)單。

何時(shí)選擇 Vue.js？

如果你希望通過以最簡(jiǎn)單的方式來制作 Web 應(yīng)用程序，那么你應(yīng)該選擇 Vue。如果你的 Javascript 基礎(chǔ)不是太強(qiáng)大，或者有嚴(yán)格的開發(fā)截止日期，Vue 將是一個(gè)很好的選擇。

如果你的前端是 Laravel，那么請(qǐng)選擇 Vue。Laravel 社區(qū)的開發(fā)者認(rèn)為 Vue 是他們最喜歡的框架。Vue 將總處理時(shí)間縮短了50％，并釋放了服務(wù)器上的空間。

如果是開發(fā)小規(guī)模應(yīng)用或者開發(fā)時(shí)不喜歡受約束，請(qǐng)選擇Vue。

如果你很熟悉 ES5 Javascript 和 HTML，那么請(qǐng)使用 Vue 完成你的項(xiàng)目。

如果你想要在瀏覽器中編譯模板并且使用其簡(jiǎn)單性，使用獨(dú)立版本的Vue會(huì)很好。

如果你打算構(gòu)建性能關(guān)鍵型SPA或需要功能范圍的 CSS，Vue 的單文件組件會(huì)非常完美。

何時(shí)選擇 Angular？

如果你需要構(gòu)建大型復(fù)雜的應(yīng)用程序，那么應(yīng)該選擇 Angular，因?yàn)?Angular 為客戶端應(yīng)用程序開發(fā)提供了一個(gè)完整而全面的解決方案。

對(duì)于希望處理客戶端和服務(wù)器端模式的開發(fā)人員來說，Angular 是一個(gè)不錯(cuò)的選擇。開發(fā)人員喜歡 Angular 的主要原因是 Angular 能夠使他們專注于任何類型的設(shè)計(jì)，無論是 jQuery 調(diào)用還是 DOM 配置干擾。

對(duì)于開發(fā)人員創(chuàng)建具有多個(gè)組件和復(fù)雜需求的 Web 應(yīng)用程序，Angular 也同樣適用。當(dāng)你選擇Angular 時(shí)，本地開發(fā)人員會(huì)發(fā)現(xiàn)更容易理解應(yīng)用程序功能和編碼結(jié)構(gòu)。

如果你想在新項(xiàng)目中選擇現(xiàn)有組件，也可以選擇 Angular，因?yàn)槟阒恍鑿?fù)制和粘貼代碼即可。

Angular 可以使用雙向數(shù)據(jù)綁定功能來管理 DOM 和模型之間的同步。這使 Angular 成為了 Web 應(yīng)用程序開發(fā)的強(qiáng)有力的工具。

希望制作更輕更快的Web應(yīng)用程序的開發(fā)人員可以利用 Angular 中的 MVC 結(jié)構(gòu)和獨(dú)立的邏輯和數(shù)據(jù)組件，這有助于加速開發(fā)過程。

代碼比較

分析 Vue 和 Angular 的代碼很有趣。包含標(biāo)記，樣式和行為的代碼可以幫助開發(fā)者構(gòu)建高效且可重用的接口。在 Angular 中，控制器和指令等實(shí)體包含在模塊中，而 Vue 的模塊中包含組件邏輯。

Vue 組件

 Vue.extend({ 
 data: function(){ return {...} }, 
 created: function() {...}, 
 ready: function() {...}, 
 components: {...}, 
 methods: {...}, 
 watch: {...} 
 //(other props excluded) 
});

Angular 模塊

angular.module(‘myModule’, […]);

Angular 中的 Directive 更加強(qiáng)大。

Vue 指令

Vue.directive('my-directive', {
 bind: function () {...}, 
 update: function (newValue, oldValue) {...}, 
 unbind: function () {...}
 });

Angular 指令

myModule.directive('directiveName', function (injectables) { 
 return { 
 restrict: 'A', 
 template: '<p></p>', 
 controller: function() { ... },
 compile: function() {...},
 link: function() { ... } 
 //(other props excluded) };
 });

由于 Vue.js 受 Angular 啟發(fā)，也借用了 Angular 的模板語法。因此循環(huán)，這兩個(gè)框架的插值和條件的語法都非常相似。

下面給出代碼片段：

Vue 插值

{{myVariable}}

角插值

{{myVariable}}

Vue 循環(huán)

<li v-repeat="items" class="item-{{$index}}">
{{myProperty}}
</li>

Angular 循環(huán)

<li ng-repeat="item in items" class="item-{{$index}}"> 
{{item.myProperty}}
</li>

Vue 條件

<p v-if="myVar"></p> 
<p v-show="myVar"></p

角度條件

<p ng-if="myVar"></p>
<p ng-show="myVar"></p>

Vue.js 的編碼使得頁面渲染變得非常簡(jiǎn)單。事實(shí)上，Vue.js 更像是一個(gè)庫而不是框架，因?yàn)樗惶峁?Angular 的所有功能。開發(fā)者將不得不依賴 Vue.js 的第三方代碼，而 Angular 提供了 HTTP 請(qǐng)求服務(wù)或路由器等功能。

Angular 和 Vue.js 的版本發(fā)布

2017年6月8日發(fā)布了 Vue.js v2.3.4的最新穩(wěn)定版本 。在此版本之前，還有13個(gè)版本。

Angular 4 于2017年3月發(fā)布。早期版本為 Angular 1和2，沒有 Angular 3。Angular 的第5版于2017年11月發(fā)布。第6版預(yù)計(jì)將于2018年3月發(fā)布，第7版預(yù)計(jì)將于2018年9月/ 10月發(fā)布。

Angular 開發(fā)工具介紹

專注企業(yè)應(yīng)用開發(fā)的 Wijmo ，是用 TypeScript 編寫的新一代 JavaScript/HTML5 控件集。秉承觸控優(yōu)先的設(shè)計(jì)理念，Wijmo 在全球率先支持 AngularJS，并提供性能卓越、零依賴的 FlexGrid 和圖表等多個(gè)控件。Wijmo 靈活的 API 為用戶提供易用、輕松的操作體驗(yàn)，全面滿足開發(fā)所需，是構(gòu)建企業(yè)應(yīng)用程序的全套控件集。

結(jié)論

Vue.js 是輕量級(jí)的開發(fā)框架，很適合開發(fā)小規(guī)模靈活的 Web 應(yīng)用程序；而 Angular 盡管學(xué)習(xí)曲線較為陡峭，但卻是構(gòu)建完整復(fù)雜應(yīng)用的好選擇。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com