ホームページ  >  記事  >  ウェブフロントエンド  >  反応とvuejsの違いは何ですか

反応とvuejsの違いは何ですか

青灯夜游
青灯夜游オリジナル
2021-09-22 15:31:363425ブラウズ

違い: 1. Vue は双方向バインディングですが、React はそうではありません; 2. React は JSX を使用し、Vue は HTML テンプレートを使用してビューを作成します; 3. React は状態を管理するために Flux を使用し、Vue はVuex; 4. React は Create React App スキャフォールディングを使用し、Vue は vue-cli を使用します。

反応とvuejsの違いは何ですか

#このチュートリアルの動作環境: Windows7 システム、vue2.9.6&&react16 バージョン、DELL G3 コンピューター。

React.js と Vue.js の比較

Type開発者初公開執筆クロスプラットフォーム開発学習曲線人気度再利用性パフォーマンスGitHub の寄稿者##モデル仮想 DOM (ドキュメント オブジェクト モデル) 仮想 DOM HTML ベースのテンプレート機能 単一ページまたはモバイル アプリケーション開発の基盤として使用可能 高度なシングル ページ アプリケーションを強化できる Web アプリケーション フレームワーク SimpleReact は Vue よりも複雑ですVue は React よりもシンプルです注目すべき機能 ステートフル コンポーネント コンポーネント (アプリケーション全体を、自己完結型で多くの場合再利用可能な小さなコンポーネントに分割します) ブートストラップ アプリケーションCRA (React アプリケーションの作成)Vue-cli

react と vuejs の違い

1. データ バインディング

Vue の関連データバインディング部分

#vue は双方向バインディングです。Vue.js には 2 つのコア機能があり、1 つはレスポンシブ データ バインディング システム、もう 1 つはコンポーネント システムです。いわゆる双方向バインディングとは、Vue インスタンス内のデータと、それがレンダリングする DOM 要素の内容が一致することを意味し、誰が変更されても、相手もそれに応じて同じデータに更新されます。これは、プロパティ アクセサーを設定することによって実現されます。

vue では、データ バインディングは補間式、命令システム、*クラスとスタイル、イベント ハンドラーとフォーム スペース、Ajax リクエストと計算プロパティに関連しています

反応には 2 つの要素がありませんデータの双方向バインディング

react は一方向のデータフローです

React はステート (モデル層) とビュー層データの双方向バインディングによりデータのリアルタイム更新変更を実現します具体的には、View レイヤーに直接 JS コードを記述し、Model レイヤーのデータを使用してレンダリングします。フォーム操作、トリガー イベント、Ajax リクエストなどによってデータ変更がトリガーされると、二重同期が実行されます

2. 再レンダリングと最適化

React と Vue を比較する場合、どちらが優れているかを決定する際に、速度は重要な比較要素にはなりません。パフォーマンスの観点から、再レンダリング機能について考えてみましょう。コンポーネントの状態が変化すると、React のメカニズムによりコンポーネント ツリー全体の再レンダリングがトリガーされます。子コンポーネントの不必要な再レンダリングを避けるために、追加のプロパティを使用することもできます。

Vue の再レンダリング機能はすぐに利用できますが、Vue は最適化された再レンダリングを提供し、システムはレンダリング プロセス中に依存関係を追跡し、それに応じて動作します。

Vue の再レンダリングは、Vue を世界中の開発者の間で広く受け入れられているフレームワークにする最も注目すべき機能です。

3. JSX と HTML

React は、開発者が JavaScript の力を使用してコンポーネントを作成できる宣言型 JavaScript XML である JSX を使用します。 Vue.js は HTML テンプレートを使用してビューを作成します。

HTML ベースのテンプレートは、既存のアプリケーションを改善して Vue のリアクティブ機能のメリットを得るのに、より親しみやすく、有益です。これにより、初心者も経験豊富な専門家も、ほとんどが何らかの形で HTML を扱ったことがあるため、学習が容易になります。

4. ルーティングおよび状態管理ソリューション

React や Vue などのコンポーネントベースのフレームワークで、アプリケーションの拡張を開始するとき プログラミングするとき、状態管理とデータフローにさらに注意を払う必要があります。これは、相互に対話し、データを共有するコンポーネントが多数あるためです。

この場合、React は Flux/Redux アーキテクチャと呼ばれる革新的なソリューションを提供します。これは単方向データ フローを表し、有名な MVC アーキテクチャの代替品です。ここで、Vue.js フレームワークについて考えてみると、Vuex と呼ばれる上位レベルのアーキテクチャがあり、Vue に統合され、比類のないエクスペリエンスを提供します。

5. 構築ツール

React と Vue はどちらも非常に優れた開発環境を備えています。ほとんど、またはまったく構成を行わなくても、最新のプラクティスとテンプレートを使用できるアプリケーションを作成できます。 React には Create React App (CRA) があり、Vue には vue-cli があります。

どちらのブートストラップ ツールも、快適で柔軟な開発環境を提供し、コーディングを始めるための優れた出発点を提供します。

関連する推奨事項: 「vue.js チュートリアル


## React
Vue
JavaScript ライブラリ JavaScript ライブラリ
Web およびネイティブに最適 主に Web 開発に焦点を当てていますが、今後は他のプラットフォームもサポートするように作成されています
Facebook コミュニティ (Jordan Walke によって作成) Evan You
2013 年 3 月 2014 年 2 月
JavaScript JavaScript
React の React Native は成熟し、広く使用されているネイティブ アプリケーション プラットフォームです。 Vue の Weex はまだ進化しており、スムーズな開発エクスペリエンスを提供することを目指しています
急な学習曲線、深い知識が必要 簡単な学習曲線、HTML ベースのテンプレートですぐに慣れる
React は、 GitHub で最も人気のある Javascript プロジェクトのリスト Vue.js が 1 位にランクされ、2017 年で最もファッショナブルなプロジェクトです。GitHub には 40,000 を超えるスターが追加されました。
CSSのみ 最大限の再利用性
これも速い これも速い
1201 189
props を使用した一方向のデータ バインディング 仮想 DOM ライフサイクル メソッド JSX (JavaScript XML) HTML 以外のアーキテクチャ HTML ベースのテンプレート リアクティブ 変換 ルーティング *統合

以上が反応とvuejsの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。