他のフレームワークと比較する


このページは間違いなく最も書くのが難しいですが、非常に重要でもあると考えています。おそらく、いくつかの問題に遭遇し、他のフレームワークを使用して解決したことがあるのではないでしょうか。ここでの目的は、Vue により良いソリューションがあるかどうかを確認することです。これが私たちがここで答えたいことです。

客観的に言えば、コア チーム メンバーとして、私たちは明らかに Vue を好み、いくつかの問題に対しては Vue の方が優れた解決策になると考えています。この信念がなかったら、私たちは一日中それに取り組むのに忙しくはならないでしょう。しかし、ここではすべてをできるだけ公平かつ正確に説明したいと思います。 React の広大なエコシステムや、IE6 をカバーする Knockout のブラウザ サポートなど、他のフレームワークにも大きな利点があります。それらをすべてリストしてみます。

また、JavaScript の世界は非常に急速に進歩しているため、ドキュメントを最新の状態に保つために 皆様のご協力をお待ちしております。不正確な点や、正しくないと思われる点に気づいた場合は、問題を送信してお知らせください。


#目次

    ##React

    • 実行時のパフォーマンス

      • HTML と CSS

      • スケール

      • ネイティブ レンダリング

      • MobX

      • Preact およびその他の React に似たライブラリ

    • AngularJS

    • 複雑さ

      • 柔軟性とモジュール性

      • データ バインディング

      • ディレクティブとコンポーネント

      • 実行時のパフォーマンス

    Angular

  • ##TypeScript

    • 実行時のパフォーマンス

    • ボリューム

    • 柔軟性

    • #学習曲線

    • ##Ember

  • ノックアウト

  • ##ポリマー

    • #暴動
  • # ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

    React

    React と Vue には多くの類似点があり、両方とも次の点を備えています。

    • 仮想の使用DOM

    • # は、レスポンシブ (Reactive) ビュー コンポーネントとコンポーネント化された (Composable) ビュー コンポーネントを提供します。

    • コア ライブラリに重点を置き、ルーティングやグローバル状態管理などの他の機能は関連ライブラリに任せてください。

    多くの類似点があるため、この領域の比較にはさらに時間を費やします。ここでは、技術的な内容の正確性を確保するだけでなく、バ​​ランスの取れた考慮事項も考慮します。より豊かなエコシステムなど、React が Vue よりも優れている点を認識する必要があります。

    次の章の一部は、最近 React 16 がリリースされたため、若干古くなっている可能性があります。近い将来、React コミュニティと協力してコンテンツのこの部分を書き直す予定です。


    実行時のパフォーマンス

    React と Vue はどちらも非常に高速なので、速度は重要ではありませんそれらの中から選択する際の要素となります。特定のデータ パフォーマンスについては、非常に単純なコンポーネント ツリーのレンダリング/更新の実際のパフォーマンスに焦点を当てた、この サードパーティ ベンチマーク に移行できます。

    最適化

    React アプリケーションでは、コンポーネントの状態が変化すると、そのコンポーネントをルートとしてコンポーネントのサブツリー全体が再レンダリングされます。

    子コンポーネントの不必要な再レンダリングを回避するには、可能な限り PureComponent を使用するか、手動で ShouldComponentUpdate メソッドを実装する必要があります。同時に、コンポーネントの最適化を容易にするために、不変のデータ構造を使用することが必要になる場合があります。

    ただし、PureComponent と shouldComponentUpdate を使用する場合は、コンポーネントのサブツリー全体のレンダリング出力がコンポーネントの props によって決定されることを確認する必要があります。そうでない場合、このような最適化により、目に見えないレンダリングの不整合が生じる可能性があります。このため、React でのコンポーネントの最適化にはかなりの精神的負荷がかかります。

    Vue アプリケーションでは、レンダリング プロセス中にコンポーネントの依存関係が自動的に追跡されるため、システムはどのコンポーネントを実際に再レンダリングする必要があるかを正確に知ることができます。各コンポーネントが shouldComponentUpdate を自動的に取得しており、上記のサブツリー問題に制限がないことがわかります。

    Vue のこの機能により、開発者はそのような最適化を考慮する必要がなくなり、アプリケーション自体に集中できるようになります。


    #HTML & CSS

    React では、すべてが JavaScript です。 JSXで表現できるのはHTMLだけではなく、JavaScriptにCSSを組み込んで処理するケースが増えてきています。このタイプのアプローチには利点もありますが、すべての開発者が満足できるわけではないトレードオフもあります。

    Vue の全体的なアイデアは、古典的な Web テクノロジーを採用し、それを拡張することです。以下で詳しく分析していきます。

    JSX とテンプレート

    React では、すべてのコンポーネントのレンダリング関数が JSX に依存します。 JSX は、XML 構文を使用して JavaScript を記述するための構文糖です。

    JSX のレンダリング関数を使用すると、次の利点があります。

    • プログラミング言語 JavaScript の完全な機能を使用して、ビュー ページを構築できます。たとえば、一時変数や JS に付属するフロー制御を使用したり、現在の JS スコープ内の値を直接参照したりできます。

    • 開発ツールの JSX サポートは、現在利用可能な他の Vue テンプレートと比較して比較的高度です (リンティング、型チェック、エディターのオートコンプリートなど)。

    実際、Vue は レンダリング関数 も提供しており、JSX もサポートしています。ただし、デフォルトの推奨事項はテンプレートです。仕様に準拠する HTML はすべて合法的な Vue テンプレートであり、これにはいくつかの独自の利点もあります。

    • HTML に慣れている多くの開発者にとって、テンプレートは JSX よりも読みやすいと感じます。書くのが自然です。もちろん主観的な好みの要素はありますが、この違いが開発効率の向上につながるのであれば、客観的な価値があります。

    • HTML ベースのテンプレートを使用すると、既存のアプリケーションを段階的に Vue に移行することが簡単になります。

    • これにより、デザイナーや新しい開発者がプロ​​ジェクトを理解し、プロジェクトに参加することが容易になります。

    • Pug などの他のテンプレート プリプロセッサを使用して Vue テンプレートを作成することもできます。

    一部の開発者は、テンプレートを開発するには追加の DSL (ドメイン固有言語) を学ぶ必要があることを意味すると考えていますが、私たちはこの区別は表面的なものだと考えています。まず第一に、JSX は無料で学習できるわけではありません。JSX は JS に追加された構文のセットです。同時に、JS に精通している人が JSX を学ぶのが簡単であるのと同様に、HTML に精通している人が Vue のテンプレート構文を学ぶのも簡単です。最後に、DSL の存在により、開発者は少ないコードでより多くのことを行うことができます。たとえば、v-on のさまざまな修飾子は、対応する関数を JSX コードに実装するためにさらに多くのコードを必要とします。

    より抽象的に見ると、コンポーネントを 2 つのカテゴリに分類できます。1 つはプレゼンテーション的なカテゴリ、もう 1 つは論理的なカテゴリです。前者にはテンプレートを使用し、後者には JSX またはレンダリング関数を使用することをお勧めします。これら 2 種類のコンポーネントの割合はアプリケーションの種類によって異なりますが、全体としては、論理コンポーネントよりも表示コンポーネントの方がはるかに多いことがわかります。

    コンポーネント スコープ内の CSS

    コンポーネントを複数のファイル (CSS モジュール など) に分散しない限り、CSS スコープは CSS-in-JS ソリューション (styled-components など) を通じて React に実装されます。 魅力的なと感情)。これにより、通常の CSS 作成プロセスとは異なる、コンポーネント指向の新しいスタイリング パラダイムが導入されます。さらに、ビルド時に CSS を別のスタイルシートに抽出することがサポートされていますが、バンドルでは通常、これらのスタイルを有効にするためにランタイム プログラムが必要です。 JavaScript を使用してスタイルを柔軟に処理できますが、バンドルのサイズと実行時のオーバーヘッドを考慮する必要もあります。

    CSS-in-JS ファンの場合は、多くの主流の CSS-in-JS ライブラリも Vue (styled-components-vue や vue -emotion# など) をサポートしています。 ##)。ここでの React と Vue の主な違いは、Vue のデフォルトのスタイル設定方法が Single File Component の style に似たタグであることです。

    単一ファイル コンポーネント コンポーネント コードの一部として同じファイル内の CSS を完全に制御できます。 

    <style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

    このオプションの

    scoped 属性は、コンパイル時にコンポーネント内の CSS のスコープを指定する一意の属性 (data-v-21e5b78 など) を自動的に追加します。 .list-container:hover は、.list-container[data-v-21e5b78]:hover のようなものにコンパイルされます。

    最後に、Vue の単一ファイル コンポーネントのスタイル設定は非常に柔軟です。

    vue-loader を使用すると、任意のプリプロセッサ、ポストプロセッサを使用でき、さらに CSS モジュール を深く統合することもできます。これらはすべて <style> タグ内部で行われます。


    スケール

    スケールアップ

    Vue とReact は、大規模なアプリケーションを処理するための強力なルーティングを提供します。 React コミュニティは状態管理 (Flux、Redux など) において非常に革新的であり、これらの状態管理パターンや

    Redux 自体 さえも簡単に Vue アプリケーションに統合できます。実際、Vue はこのモデルをさらに発展させ (Vuex)、Vue の状態管理ソリューション Vuex をより深く統合しました。これにより、より良い開発エクスペリエンスがもたらされると私は信じています。

    この 2 つのもう 1 つの重要な違いは、Vue のルーティング ライブラリと状態管理ライブラリが公式に保守およびサポートされ、コア ライブラリと同期して更新されることです。 React は、これらの問題をコミュニティに任せることを選択し、より分散化されたエコシステムを作成します。しかし、相対的には、React のエコシステムは Vue よりも繁栄しています。

    最後に、Vue は CLI スキャフォールディング を提供します。これにより、インタラクティブなスキャフォールディング ガイダンスを通じてプロジェクトを非常に簡単に構築できます。これを使用して、コンポーネントのプロトタイプを迅速に開発することもできます。 React はこの点に関して create-react-app も提供しますが、まだいくつかの制限があります:

      プロジェクトの生成時に構成を行うことはできません。 Vue CLI はスケーラブルなランタイム依存関係で実行され、
    • plugins

      を通じて拡張できます。

      • これは、単一ページ アプリケーションを構築するためのデフォルト オプションのみを提供しますが、Vue はさまざまな目的のためのテンプレートを提供します。

      • ユーザーが作成した
    • デフォルト構成

      を使用してプロジェクトを構築することはできません。これは、エンタープライズ環境で事前に確立された規則に特に役立ちます。

      • これらの制限は仕様によるものであることに注意することが重要ですが、これには利点もあります。たとえば、プロジェクトの要件が非常に単純な場合、ビルド プロセスをカスタマイズする必要はありません。依存関係として更新できます。
    さまざまな設計コンセプト

    について詳しくは、こちらをお読みください。

    スケールダウン

    React の学習曲線は急勾配です。多くの例でこれらの構文が使用されているため、React の学習を開始する前に、JSX と ES2015 について理解しておく必要があります。ビルド システムを学ぶ必要があります。技術的には Babel を使用してコードをその場でコンパイルできますが、これは運用環境での使用には推奨されません。

    Vue が React のようにスケールアップするのと同じように、Vue は jQuery のようにスケールダウンします。実行するには、次のタグをページに配置するだけです:

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    その後、Vue コードを作成して運用環境に適用できます。Vue ファイルの最小バージョンに置き換えるだけで済み、他のパフォーマンスの問題を心配する必要はありません。

    JSX、ES2015を学習したり、初期段階でシステムを構築したりする必要がないため、開発者は

    ガイド

    を読めば簡単なアプリケーションを1日以内に構築できます。


    #ネイティブ レンダリング

    React Native を使用すると、同じコンポーネント モデルを使用してネイティブ レンダリング機能を備えたアプリ (iOS および Android) を作成できます。複数のプラットフォームで同時に開発できることは、開発者にとって素晴らしいことです。したがって、Vue と Weex は正式に協力することになります。Weex は、Alibaba によって開始されたクロスプラットフォームのユーザー インターフェイス開発フレームワークです。また、Apache Foundation でプロジェクトを育成しています。Weex を使用すると、Vue 構文を使用して、次のような開発を行うことができます。ブラウザ上で実行され、iOS および Android 上のネイティブ アプリケーションの開発にも使用できるコンポーネントのみ。

    現在、Weex はまだ活発に開発が行われており、その成熟度では React Native に匹敵することはできません。ただし、Weex の開発は世界最大の電子商取引企業のニーズによって推進されており、Vue チームも開発者に優れた開発エクスペリエンスを提供するために Weex チームと積極的に協力します。

    もう 1 つのオプションは、NativeScript-Vue です。これは、Vue.js を使用して完全なネイティブ アプリケーションを構築するための NativeScript プラグインです。


    MobX

    Mobx 非常にReact コミュニティで人気のある、ほぼ同じリアクティブ システムが実際に Vue でも使用されています。限られた範囲ではありますが、React Mobx は Vue のより扱いにくいバージョンと見なすこともできるため、これらを組み合わせて使用​​することに慣れている場合は、Vue を選択する方が理にかなっています。


    Preact およびその他の React に似たライブラリ

    React に似たライブラリは、次のような傾向があります。可能な限り対応して API とエコシステムを共有します。したがって、上記の比較はそれらにも同様に当てはまります。それらと React の違いは、多くの場合、より小さな生態系にあります。これらのライブラリは React エコシステム内のすべてと 100% 互換性があるわけではないため、一部のツールや補助ライブラリが利用できない場合があります。あるいは、動作しているように見えても、使用する React に似たライブラリが公式に React と厳密に一致しない限り、いつでも非互換性が発生する可能性があります。


    AngularJS (Angular 1)

    Vue の構文の一部は非常に似ています。 AngularJS のそれへ (例:

    v-if と ng-if)。なぜなら、AngularJS は Vue の初期開発のインスピレーションだったからです。ただし、AngularJS に存在する多くの問題は Vue で解決されています。


    複雑さVue.js は API と設計の両方で Vue.js よりも優れていますAngularJS ははるかにシンプルなので、すべての機能をすぐにマスターして開発を始めることができます。


    #柔軟性とモジュール性

    Vue.js は、より柔軟でオープンなソリューションです。これにより、AngularJS によって設定されたルールに常に従う必要がなくなり、アプリケーションを希望どおりに編成できるため、Vue はさまざまなプロジェクトに適したものになります。私たちは、決定をあなたに委ねることが重要であることを知っています。

    これが、Vue.js に基づいた迅速な開発のための完全なシステムを提供する理由です。 Vue CLI は、Vue エコシステムの標準の基礎ツールになることを目指しています。これにより、さまざまなビルド ツールが確立されたデフォルト構成とシームレスに連携できるようになります。こうすることで、構成にあまり時間を費やすことなく、アプリケーション自体に集中できます。同時に、実際のニーズに応じて各ツールの構成を調整する柔軟性も提供します。


    データ バインディング

    AngularJS は双方向バインディングを使用しますが、Vue はデータ バインディングの間で一方向バインディングを強制します。さまざまなコンポーネントからデータ フローまで。これにより、アプリケーション内のデータ フローがより明確になり、理解しやすくなります。


    #命令とコンポーネント

    命令とコンポーネントは、Vue ではより明確に分離されています。ディレクティブは DOM 操作をカプセル化するだけですが、コンポーネントは独自のビューとデータ ロジックを備えた自己完結型の独立したユニットを表します。 AngularJS では、すべてがディレクティブによって行われ、コンポーネントはディレクティブの特別な種類にすぎません。


    実行時のパフォーマンス

    Vue はパフォーマンスが優れており、最適化が非常に簡単です。ダーティチェックは使用しないでください。

    AngularJS では、ウォッチャーが増えると、スコープが変更されるたびにすべてのウォッチャーを再計算する必要があるため、動作がどんどん遅くなります。また、一部のウォッチャーが別の更新をトリガーした場合、ダイジェスト サイクルを複数回実行する必要がある場合があります。 AngularJS ユーザーは、汚いチェック ループの問題を解決するために難解な手法に頼ることがよくあります。場合によっては、多数のウォッチャーがあるスコープを最適化する簡単な方法が存在しないことがあります。

    Vue では、依存関係の追跡と非同期キューの更新に基づく監視システムを使用しているため、この問題はまったく発生しません。すべてのデータ変更は、間に明確な依存関係がない限り、独立してトリガーされます。

    興味深いことに、Angular と Vue は同様の設計を使用して、AngularJS に存在するいくつかの問題を解決しています。


    Angular (オリジナル Angular 2)

    新しい Angular を独自に開発してみましょうAngularJS とはまったく異なるフレームワークであるため、議論してください。たとえば、優れたコンポーネント システムがあり、多くの実装が完全に書き直され、API が完全に変更されました。



    #TypeScript

    Angular のドキュメントと学習リソースはほぼ完全に TS 指向であるため、実際には Angular は TypeScript で開発する必要があります。 TS には多くの利点があります。静的型チェックは大規模なアプリケーションで非常に役立ち、Java や C# のバックグラウンドを持つ開発者の開発効率も大幅に向上します。

    ただし、誰もが TS の使用を望んでいるわけではありません。小規模および中規模のプロジェクトでは、TS を導入しても明らかな利点はそれほど多くない可能性があります。このような場合、TS なしで Angular を使用するのは難しいため、Vue を使用することをお勧めします。

    最後に、Vue と TS の統合は Angular ほど深くないかもしれませんが、公式の type 宣言 と コンポーネント デコレータ も提供しており、多数のユーザーの実稼働環境では Vue TS を組み合わせて使用​​します。また、Vue TS ユーザーにより良い型チェックと IDE 開発エクスペリエンスを提供することを目的として、Microsoft の TS / VSCode チームと積極的に協力しています。


    #実行時のパフォーマンス

    どちらのフレームワークも高速で、非常によく似たベンチマーク データを持っています。

    特定のデータを参照して、より詳細な比較を行うことはできますが、速度が決定的な要素であってはなりません。


    ボリューム

    ボリュームに関しては、最近の Angular バージョンでは

    AOT が使用されます。および tree-shaking 手法により、最終的なコード サイズが大幅に削減されました。ただし、それでも、Vuex Vue Router を含む Vue プロジェクト (gzip 後 30 KB) は、これらの最適化を使用して angular-cli によって生成されるデフォルトのプロジェクト サイズ (~65 KB) よりもはるかに小さいです。


    柔軟性

    Vue は Angular よりも柔軟性が高く、Vue は公式にビルド ツールを提供しています。プロジェクトをビルドしますが、アプリケーション コードを編成する方法が制限されるわけではありません。厳格なコード編成基準を好む人もいるかもしれませんが、より柔軟で自由なアプローチを好む開発者もいます。


    学習曲線

    Vue を学習するには、HTML と JavaScript の十分な基礎だけが必要です。これらの基本的なスキルがあれば、

    ガイドを読むだけですぐに開発に取り掛かることができます。

    Angular の学習曲線は非常に急です。フレームワークとして、その API 領域は Vue よりもはるかに大きいため、効率的に作業を開始するには、より多くの概念を理解する必要があります。もちろん、Angular 自体の複雑さは、大規模で複雑なアプリケーションのみを対象とするという設計目標によるものですが、そのため、経験の浅い開発者にとっては非常に不親切なものになっていることも否定できません。


    #Ember

    Ember は多用途のフレームワークです。多数の規約が用意されており、一度慣れてしまえば、開発は非常に効率的になります。ただし、これは学習曲線が長く、柔軟性に欠けることも意味します。これは、フレームワークとライブラリ (および疎結合されたツールのセット) の間でトレードオフを行うことを意味します。後者はより自由ですが、より多くのアーキテクチャ上の決定を行う必要もあります。

    言い換えれば、最も良い比較は、Vue カーネルと Ember の

    template および data modellayer:

    • # Vue は通常の JavaScript オブジェクトに基づいて応答を構築し、自動計算されたプロパティを提供します。 Ember では、すべてを Ember オブジェクト内に配置し、計算されたプロパティの依存関係を手動で宣言する必要があります。

    • Vue のテンプレート構文ではフル機能の JavaScript 式を使用できますが、Handlebars の構文はヘルパー関数に比べて非常に制限されています。

    • パフォーマンスの点では、最新の Glimmer エンジンである Ember 3.x を使用しても、Vue は Ember よりも

      はるかに優れています。 Vue はバッチを自動的に更新できますが、Ember はパフォーマンス重視のシナリオでは手動管理が必要です。


    Knockout

    Knockout はこの分野のパイオニアですMVVM の依存関係を追跡します。応答性の高いシステムも Vue に非常によく似ています。
    ブラウザのサポート

    やその他の側面におけるパフォーマンスも優れています。 Vue は少なくとも IE9 のみをサポートしますが、Vue は少なくとも IE6 をサポートします。
    Knockout は時間の経過とともに速度が少し低下し、少し古くなったように見え始めています。たとえば、そのコンポーネント システムには完全なライフ サイクル イベント メソッドがありませんが、これらは現在では非常に一般的になっています。また、

    Vue

    と比較すると、そのメソッドはサブコンポーネントのインターフェイスを呼び出すのが少し面倒です。 研究に興味がある場合は、この 2 つがインターフェース設計の概念が異なることにも気づくでしょう。これは、それぞれが作成した

    simple Todo List

    に反映されています。少し主観的かもしれませんが、多くの人は Vue の API インターフェイスの方がシンプルで洗練された構造だと考えています。

    Polymer

    Polymer は、Google が後援するもう 1 つのプロジェクトであり、実際には Vue のインスピレーションの源でした。 Vue のコンポーネントは、Polymer のカスタム要素と大まかに比較でき、この 2 つは類似した開発スタイルを持っています。最大の違いは、Polymer は Web コンポーネント標準の最新バージョンに基づいており、動作を助けるために重量のあるポリフィルを必要とし (パフォーマンスは低下しますが)、ブラウザ自体はこれらの機能をサポートしていないことです。それに比べて、Vue は IE9 をサポートしている場合、動作するためにポリフィルに依存する必要がありません。

    Polymer バージョンでは、パフォーマンスを補うために、チームはデータ バインディング システムの使用を非常に限定的にしました。たとえば、Polymer でサポートされている式はブール否定と単一のメソッド呼び出しだけであり、その計算メソッドの実装はあまり柔軟ではありません。


    Riot

    ##Riot 3.0 は、同様のコンポーネントベースの開発モデル ( でタグと呼ばれます) を提供します。 Riot) は、小さくてエレガントな API を提供します。 Riot と Vue には、設計哲学において多くの類似点がある可能性があります。 Vue は Riot より少し重いですが、Vue には依然として多くの重要な利点があります: