VueJS-概要
VueJSは、インタラクティブなWebインターフェイスの開発に使用されるオープンソースのプログレッシブJavaScriptフレームワークです。これは、Web開発を簡素化するために使用される有名なフレームワークの1つです。VueJSはビューレイヤーに焦点を当てています。フロントエンド開発用の大きなプロジェクトに問題なく簡単に統合できます。
VueJSのインストールは非常に簡単に開始できます。開発者なら誰でも、インタラクティブなWebインターフェイスを簡単に理解して構築できます。VueJSは、Googleの元従業員であるEvanYouによって作成されました。VueJSの最初のバージョンは2014年2月にリリースされました。最近、GitHubで64,828の星を記録し、非常に人気があります。
特徴
以下は、VueJSで利用できる機能です。
仮想DOM
VueJSは、React、Emberなどの他のフレームワークでも使用される仮想DOMを利用します。変更はDOMに加えられず、代わりに、JavaScriptデータ構造の形式で存在するDOMのレプリカが作成されます。 。変更を加える場合は常に、JavaScriptデータ構造に変更が加えられ、JavaScriptデータ構造が元のデータ構造と比較されます。次に、最終的な変更が実際のDOMに更新され、ユーザーには変更が表示されます。これは最適化の観点からは優れており、コストが低く、変更をより高速に行うことができます。
データバインディング
データバインディング機能は、HTML属性への値の操作または割り当て、スタイルの変更、と呼ばれるバインディングディレクティブの助けを借りたクラスの割り当てに役立ちます。 v-bind VueJSで利用できます。
コンポーネント
コンポーネントは、HTMLで再利用できるカスタム要素の作成に役立つVueJSの重要な機能の1つです。
イベント処理
v-on VueJSのイベントをリッスンするためにDOM要素に追加される属性です。
アニメーション/トランジション
VueJSは、HTML要素がDOMに追加/更新または削除されたときに、HTML要素に遷移を適用するさまざまな方法を提供します。VueJSには、トランジション効果のために要素をラップする必要があるトランジションコンポーネントが組み込まれています。サードパーティのアニメーションライブラリを簡単に追加したり、インターフェイスにインタラクティブ機能を追加したりできます。
計算されたプロパティ
これはVueJSの重要な機能の1つです。UI要素に加えられた変更をリッスンし、必要な計算を実行するのに役立ちます。このために追加のコーディングは必要ありません。
テンプレート
VueJSは、DOMをVueインスタンスデータにバインドするHTMLベースのテンプレートを提供します。Vueは、テンプレートを仮想DOMレンダリング関数にコンパイルします。レンダリング関数のテンプレートを利用できます。そのためには、テンプレートをレンダリング関数に置き換える必要があります。
指令
VueJSには、フロントエンドでさまざまなアクションを実行するために使用されるv-if、v-else、v-show、v-on、v-bind、v-modelなどの組み込みディレクティブがあります。
ウォッチャー
ウォッチャーは、変更されるデータに適用されます。たとえば、フォーム入力要素。ここでは、イベントを追加する必要はありません。Watcherはデータの変更を処理し、コードをシンプルかつ高速にします。
ルーティング
ページ間のナビゲーションは、vue-routerを使用して実行されます。
軽量
VueJSスクリプトは非常に軽量で、パフォーマンスも非常に高速です。
Vue-CLI
VueJSは、vue-cliコマンドラインインターフェイスを使用してコマンドラインにインストールできます。vue-cliを使用してプロジェクトを簡単にビルドおよびコンパイルするのに役立ちます。
他のフレームワークとの比較
次に、VueJSを、React、Angular、Ember、Knockout、Polymerなどの他のフレームワークと比較してみましょう。
VueJS v / s React
Virtual DOM
仮想DOMは、DOMツリーの仮想表現です。仮想DOMを使用すると、実際のDOMと同じJavaScriptオブジェクトが作成されます。DOMに変更を加える必要があるときはいつでも、新しいJavaScriptオブジェクトが作成され、変更が加えられます。後で、両方のJavaScriptオブジェクトが比較され、最終的な変更が実際のDOMで更新されます。
VueJSとReactはどちらも仮想DOMを使用しているため、より高速になります。
Template v/s JSX
VueJSは、html、js、cssを別々に使用します。初心者にとって、VueJSスタイルを理解して採用するのは非常に簡単です。VueJSのテンプレートベースのアプローチは非常に簡単です。
Reactはjsxアプローチを使用しています。すべてがReactJSのJavaScriptです。HTMLとCSSはすべてJavaScriptの一部です。
Installation Tools
Reactの用途 create react app とVueJSは vue-cli /CDN/npm。どちらも非常に使いやすく、プロジェクトはすべての基本的な要件を備えて設定されています。Reactはビルドにwebpackを必要としますが、VueJSは必要ありません。cdnライブラリを使用して、jsfiddleまたはcodepenの任意の場所でVueJSコーディングを開始できます。
Popularity
React is popular than VueJS. The job opportunity with React is more than VueJS. There is a big name behind React i.e. Facebook which makes it more popular. Since, React uses the core concept of JavaScript, it uses the best practice of JavaScript. One who works with React will definitely be a very good with all the JavaScript concepts.
VueJS is a developing framework. Presently, the job opportunities with VueJS are less in comparison to React. According to a survey, many people are adapting to VueJS, which can make it more popular in comparison to React and Angular. There is a good community working on the different features of VueJS. The vue-router is maintained by this community with regular updates.
VueJS has taken the good parts from Angular and React and has built a powerful library. VueJS is much faster in comparison to React/Angular because of its lightweight library.
VueJS v/s Angular
Similarities
VueJS has a lot of similarities with Angular. Directives such as v-if, v-for are almost similar to ngIf, ngFor of Angular. They both have a command line interface for project installation and to build it. VueJS uses Vue-cli and Angular uses angular-cli. Both offer two-way data binding, server side rendering, etc.
Complexity
Vuejs is very easy to learn and start with. As discussed earlier, a beginner can take the CDN library of VueJS and get started in codepen and jsfiddle.
For Angular, we need to go through a series of steps for installation and it is little difficult for beginners to get started with Angular. It uses TypeScript for coding which is difficult for people coming from core JavaScript background. However, it is easier to learn for users belonging to Java and C# background.
Performance
To decide the performance, it is up to the users. VueJS file size is much lighter than Angular. A comparison of the framework performance is provided in the following link http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Popularity
At present, Angular is more popular than VueJS. A lot of organizations use Angular, making it very popular. Job opportunities are also more for candidates experienced in Angular. However, VueJS is taking up the place in the market and can be considered as a good competitor for Angular and React.
Dependencies
Angular provides a lot of built-in features. We have to import the required modules and get started with it, for example, @angular/animations, @angular/form.
VueJS does not have all the built-in features as Angular and needs to depend on third party libraries to work on it.
Flexibility
VueJS can be easily merged with any other big project without any issues. Angular will not be that easy to start working with any other existing project.
Backward Compatibility
We had AngularJS, Angular2 and now Angular4. AngularJS and Angular2 have vast difference. Project application developed in AngularJS cannot be converted to Angular2 because of the core differences.
The recent version of VueJS is 2.0 and it is good with backward compatibility. It provides good documentation, which is very easy to understand.
Typescript
Angular uses TypeScript for its coding. Users need to have knowledge of Typescript to get started with Angular. However, we can start with VueJS coding anywhere in jsfiddle or codepen using the cdn library. We can work with standard JavaScript, which is very easy to start with.
VueJS v/s Ember
Similarities
Ember provides Ember command line tool, i.e. ember-cli for easy installation and compiling for Ember projects.
VueJS has also a command line tool vue-cli to start and build projects.
They both have features such as router, template, and components which makes them very rich as the UI framework.
Performance
VueJS has better performance in comparison to Ember. Ember has added a glimmer rendering engine with the aim of improving the re-render performance, which is a similar concept as VueJS and React using virtual DOM. However, VueJS has a better performance when compared to Ember.
VueJS v/s Knockout
Knockout provides a good browser support. It is supported on the lower version of the IE whereas VueJS is not supported on IE8 and below. Knockout development has slowed down over time. There is not much popularity for the same in recent times.
On the other hand, VueJS has started gaining popularity with the Vue team providing regular updates.
VueJS v/s Polymer
Polymer library has been developed by Google. It is used in many Google projects such as Google I/O, Google Earth, Google Play Music, etc. It offers data binding and computed properties similar to VueJS.
Polymer custom element definition comprises plain JavaScript/CSS, element properties, lifecycle callbacks, and JavaScript methods. In comparison, VueJS allows to easily use JavaScript/html and CSS.
Polymer uses web component features and requires polyfills for browsers, which does not support these features. VueJS does not have such dependencies and works fine in all browsers from IE9+.