VueJS-概要

*VueJS* は、インタラクティブなWebインターフェイスの開発に使用されるオープンソースのプログレッシブJavaScriptフレームワークです。 Web開発を簡素化するために使用される有名なフレームワークの1つです。 VueJSはビューレイヤーに焦点を当てています。 フロントエンド開発用の大きなプロジェクトに問題なく簡単に統合できます。

VueJSのインストールは非常に簡単に開始できます。開発者は誰でも、簡単にインタラクティブなWebインターフェイスを理解して構築できます。 VueJSは、Googleの元従業員であるEvan Youによって作成されました。 VueJSの最初のバージョンは2014年2月にリリースされました。最近、GitHubで64,828個の星を記録し、非常に人気があります。

特徴

VueJSで利用できる機能は次のとおりです。

仮想DOM

VueJSは、仮想DOMを使用します。これは、React、Emberなどの他のフレームワークでも使用されます。変更はDOMには行われず、代わりにJavaScriptデータ構造の形式で存在するDOMのレプリカが作成されます。変更が行われるたびに、JavaScriptデータ構造に変更が加えられ、後者が元のデータ構造と比較されます。その後、最終的な変更が実際のDOMに更新され、ユーザーに変更が表示されます。これは最適化の点で優れており、安価であり、変更をより高速に行うことができます。

データバインディング

データバインディング機能は、VueJSで使用可能な v-bind と呼ばれるバインディングディレクティブを使用して、HTML属性の値の操作または割り当て、スタイルの変更、クラスの割り当てを支援します。

コンポーネント

コンポーネントは、HTMLで再利用できるカスタム要素の作成を支援するVueJSの重要な機能の1つです。

イベント処理

*v-on* は、VueJSでイベントをリッスンするためにDOM要素に追加される属性です。

アニメーション/トランジション

VueJSは、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

仮想DOM *

仮想DOMは、DOMツリーの仮想表現です。仮想DOMを使用すると、実際のDOMと同じJavaScriptオブジェクトが作成されます。 DOMに変更を加える必要があるたびに、新しいJavaScriptオブジェクトが作成され、変更が行われます。後で、両方のJavaScriptオブジェクトが比較され、最終的な変更が実際のDOMで更新されます。

VueJSとReactはどちらも仮想DOMを使用するため、高速になります。

テンプレートv/s 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コーディングを開始できます。

VueJS v/s Angular

類似性

VueJSには、Angularと多くの類似点があります。 v-if、v-forなどのディレクティブは、AngularのngIf、ngForとほぼ同じです。どちらも、プロジェクトのインストールとビルドのためのコマンドラインインターフェイスを備えています。 VueJSはVue-cliを使用し、Angularはangle-cliを使用します。どちらも双方向のデータバインディング、サーバー側レンダリングなどを提供します。

複雑

Vuejsの学習と開始は非常に簡単です。前に説明したように、初心者はVueJSのCDNライブラリを使用して、codepenとjsfiddleで始めることができます。

Angularの場合、インストールのための一連の手順を実行する必要があり、初心者がAngularを使い始めるのはほとんど困難ではありません。コーディングにTypeScriptを使用しますが、これはJavaScriptのコアバックグラウンドから来た人には困難です。ただし、JavaおよびC＃のバックグラウンドに属しているユーザーにとっては簡単に習得できます。

パフォーマンス

パフォーマンスを決定するのは、ユーザー次第です。 VueJSファイルのサイズは、Angularよりもはるかに軽いです。フレームワークのパフォーマンスの比較は、次のリンクで提供されていますhttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/tablel

VueJS v/s Ember

類似性

Emberは、Emberコマンドラインツールを提供します。 Emberプロジェクトの簡単なインストールとコンパイルのためのember-cli。

VueJSには、プロジェクトを開始およびビルドするためのコマンドラインツールvue-cliもあります。

どちらにもルーター、テンプレート、コンポーネントなどの機能があり、UIフレームワークとして非常に充実しています。

パフォーマンス

VueJSはEmberと比較してパフォーマンスが優れています。 Emberは、再レンダリングのパフォーマンスを向上させる目的で、かすかなレンダリングエンジンを追加しました。これは、仮想DOMを使用したVueJSおよびReactと同様の概念です。ただし、VueJSのパフォーマンスはEmberに比べて優れています。

VueJS v/sノックアウト

Knockoutは、優れたブラウザーサポートを提供します。 IEの下位バージョンではサポートされていますが、VueJSはIE8以下ではサポートされていません。ノックアウトの開発は時間が経つにつれて遅くなりました。最近では同じものにはあまり人気がありません。

一方、VueJSは、Vueチームが定期的に更新を提供することで人気を集め始めています。

VueJS v/sポリマー

ポリマーライブラリはGoogleによって開発されました。 Google I/O、Google Earth、Google Play Musicなど、多くのGoogleプロジェクトで使用されています。 VueJSと同様のデータバインディングと計算されたプロパティを提供します。

Polymerカスタム要素の定義は、プレーンなJavaScript/CSS、要素プロパティ、ライフサイクルコールバック、およびJavaScriptメソッドで構成されます。これに対して、VueJSではJavaScript/htmlとCSSを簡単に使用できます。

PolymerはWebコンポーネント機能を使用し、ブラウザーのポリフィルを必要としますが、これらの機能はサポートしていません。 VueJSにはそのような依存関係はなく、IE9 +のすべてのブラウザーで正常に動作します。

Vuejs-overview

目次