VueJS - 概述

---

---

VueJS是一個開源的漸進式JavaScript框架，用於開發互動式Web介面。它是簡化Web開發的著名框架之一。VueJS專注於檢視層。它可以輕鬆地整合到大型前端開發專案中，沒有任何問題。

VueJS的安裝非常容易上手。任何開發人員都可以輕鬆地理解並在短時間內構建互動式Web介面。VueJS由前Google員工尤雨溪建立。VueJS的第一個版本於2014年2月釋出。它最近在GitHub上獲得了64,828顆星，使其非常受歡迎。

特性

以下是VueJS提供的特性。

虛擬DOM

VueJS使用虛擬DOM，其他框架（如React、Ember等）也使用虛擬DOM。更改不會對DOM進行，而是建立一個DOM的副本，該副本以JavaScript資料結構的形式存在。每當需要進行任何更改時，都會對JavaScript資料結構進行更改，然後將後者與原始資料結構進行比較。然後，最終更改將更新到真實的DOM，使用者將看到這些更改。這在最佳化方面很好，成本較低，並且可以更快地進行更改。

資料繫結

資料繫結功能有助於使用VueJS提供的稱為v-bind的繫結指令來操作或為HTML屬性賦值、更改樣式、分配類。

元件

元件是VueJS的重要特性之一，它有助於建立可在HTML中重用的自定義元素。

事件處理

v-on是新增到DOM元素上的屬性，用於在VueJS中監聽事件。

動畫/過渡

VueJS提供各種方法，可在將HTML元素新增到DOM、更新或從DOM中刪除時為其應用過渡。VueJS有一個內建的過渡元件，需要將其包裝在元素周圍以實現過渡效果。我們可以輕鬆地新增第三方動畫庫，併為介面新增更多互動性。

計算屬性

這是VueJS的重要特性之一。它有助於監聽對UI元素所做的更改並執行必要的計算。無需為此新增額外的程式碼。

模板

VueJS提供基於HTML的模板，用於將DOM與Vue例項資料繫結。Vue將模板編譯成虛擬DOM渲染函式。我們可以使用模板或渲染函式，為此，我們必須用渲染函式替換模板。

指令

VueJS具有內建指令，例如v-if、v-else、v-show、v-on、v-bind和v-model，這些指令用於在前端執行各種操作。

偵聽器

偵聽器應用於更改的資料。例如，表單輸入元素。在這裡，我們不必新增任何額外的事件。偵聽器負責處理任何資料更改，使程式碼簡單快捷。

路由

頁面間的導航藉助vue-router完成。

輕量級

VueJS指令碼非常輕量級，效能也很快。

Vue-CLI

VueJS可以使用vue-cli命令列介面在命令列中安裝。它有助於使用vue-cli輕鬆構建和編譯專案。

與其他框架的比較

現在讓我們將VueJS與其他框架（如React、Angular、Ember、Knockout和Polymer）進行比較。

VueJS 與 React

虛擬DOM

虛擬DOM是DOM樹的虛擬表示。使用虛擬DOM，建立一個與真實DOM相同的JavaScript物件。任何時候都需要對DOM進行更改時，都會建立一個新的JavaScript物件並進行更改。稍後，比較這兩個JavaScript物件，並在真實DOM中更新最終更改。

VueJS和React都使用虛擬DOM，這使其速度更快。

模板與JSX

VueJS分別使用html、js和css。對於初學者來說，理解和採用VueJS風格非常容易。VueJS的基於模板的方法非常簡單。

React使用jsx方法。ReactJS中的一切都是JavaScript。HTML和CSS都是JavaScript的一部分。

安裝工具

React使用create react app，而VueJS使用vue-cli /CDN/npm。兩者都非常易於使用，並且專案已設定了所有基本需求。React需要webpack進行構建，而VueJS不需要。我們可以使用cdn庫在jsfiddle或codepen中的任何位置開始VueJS編碼。

流行度

React比VueJS更流行。React的就業機會比VueJS更多。React背後有一個大公司，即Facebook，這使其更受歡迎。由於React使用JavaScript的核心概念，因此它使用了JavaScript的最佳實踐。使用React的人肯定非常精通所有JavaScript概念。

VueJS是一個正在發展的框架。目前，與React相比，VueJS的就業機會較少。根據一項調查，許多人正在採用VueJS，這可能會使其比React和Angular更受歡迎。一個良好的社群正在開發VueJS的不同特性。vue-router由這個社群維護，並定期更新。

VueJS汲取了Angular和React的優點，並構建了一個強大的庫。由於其輕量級的庫，VueJS比React/Angular快得多。

VueJS 與 Angular

相似之處

VueJS與Angular有很多相似之處。諸如v-if、v-for之類的指令幾乎與Angular的ngIf、ngFor相似。它們都有一個命令列介面來安裝專案並構建專案。VueJS使用Vue-cli，而Angular使用angular-cli。兩者都提供雙向資料繫結、伺服器端渲染等。

複雜性

Vuejs非常容易學習和上手。如前所述，初學者可以使用VueJS的CDN庫，並在codepen和jsfiddle中開始使用。

對於Angular，我們需要經過一系列步驟才能安裝，對於初學者來說，開始使用Angular有點困難。它使用TypeScript進行編碼，對於來自核心JavaScript背景的人來說比較困難。但是，對於來自Java和C#背景的使用者來說，它更容易學習。

效能

要確定性能，取決於使用者。VueJS檔案大小比Angular輕得多。框架效能的比較，請訪問以下連結 http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

流行度

目前，Angular比VueJS更流行。許多組織使用Angular，使其非常受歡迎。Angular經驗豐富的候選人的就業機會也更多。但是，VueJS正在佔據市場份額，可以被認為是Angular和React的有力競爭對手。

依賴項

Angular提供了許多內建功能。我們必須匯入所需的模組並開始使用它，例如，@angular/animations、@angular/form。

VueJS沒有像Angular那樣多的內建功能，需要依賴於第三方庫才能工作。

靈活性

VueJS可以輕鬆地與任何其他大型專案合併，沒有任何問題。Angular在與任何其他現有專案一起工作時不會那麼容易。

向後相容性

我們有AngularJS、Angular2和現在的Angular4。AngularJS和Angular2之間存在巨大差異。由於核心差異，使用AngularJS開發的專案應用程式無法轉換為Angular2。

VueJS的最新版本是2.0，並且具有良好的向後相容性。它提供了良好的文件，非常容易理解。

TypeScript

Angular使用TypeScript進行編碼。使用者需要了解TypeScript才能開始使用Angular。但是，我們可以使用cdn庫在jsfiddle或codepen中的任何位置開始VueJS編碼。我們可以使用標準JavaScript，這很容易上手。

VueJS 與 Ember

相似之處

Ember提供Ember命令列工具，即ember-cli，用於輕鬆安裝和編譯Ember專案。

VueJS也有一個命令列工具vue-cli來啟動和構建專案。

它們都具有路由、模板和元件等功能，使其成為非常豐富的UI框架。

效能

VueJS的效能比Ember更好。Ember添加了glimmer渲染引擎，旨在提高重新渲染效能，這與VueJS和React使用虛擬DOM的概念類似。但是，與Ember相比，VueJS具有更好的效能。

VueJS 與 Knockout

Knockout提供了良好的瀏覽器支援。它支援較低版本的IE，而VueJS不支援IE8及以下版本。Knockout的開發速度隨著時間的推移而減慢。最近它並沒有那麼受歡迎。

另一方面，VueJS在Vue團隊提供定期更新的情況下開始流行起來。

VueJS 與 Polymer

Polymer庫由Google開發。它用於許多Google專案，例如Google I/O、Google Earth、Google Play Music等。它提供與VueJS類似的資料繫結和計算屬性。

Polymer自定義元素定義包含純JavaScript/CSS、元素屬性、生命週期回撥和JavaScript方法。相比之下，VueJS允許輕鬆使用JavaScript/html和CSS。

Polymer使用Web元件功能，並且需要針對不支援這些功能的瀏覽器進行polyfill。VueJS沒有此類依賴項，並且在從IE9+的所有瀏覽器中都能正常工作。