vue と React のデータ フローの違いは次のとおりです。 vue は応答性の高い双方向データ バインディング システムです。つまり、データが変更されると、ビューも変更されます。データも同期的に変更されます。反応は一方向のデータ フローですが、双方向のバインディングはなく、データは主に親コンポーネントから子コンポーネントに流れます。
このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。
Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の強力なフレームワークとは異なり、Vue はボトムアップのインクリメンタル開発設計を採用しており、そのコア ライブラリはビュー層のみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、Vue エコシステムによってサポートされる単一ファイルのコンポーネントとライブラリを使用して開発された複雑な単一ページ アプリケーションを駆動する能力を十分に備えています。
ReactJS は Facebook によって構築された JavaScript Web ライブラリのセットであり、主に高性能で応答性の高いユーザー インターフェイスを構築するために使用されます。 React は、他の JavaScript フレームワークが直面する一般的な問題、つまり大規模なデータ セットの処理を解決します。 React は、仮想 DOM を使用し、変更が発生したときにパッチ インストール メカニズムを使用して DOM のダーティな部分のみを再レンダリングできるため、他のフレームワークよりもはるかに高速なパフォーマンスを実現できます。
Vue は応答性の高い双方向データ バインディング システムですが、React は双方向バインディングを持たない一方向のデータ フローです。
双方向データ バインディングとは何ですか?
データ モデルとビュー間の双方向バインディング。
データが変更されると、ビューも変更され、ビューに対するユーザーの変更は自動的にデータ モデルに同期されると言えます。これはデータにも当てはまります。モデルチェンジ。
双方向データ バインディングの利点: 一方向データ バインディングのような CRUD (作成、取得、更新、削除) 操作を実行する必要がないため、ユーザーが入力を完了すると、双方向データ バインディングが最も一般的に使用されます。フロントエンド ページに入力すると、何も操作しなくても、ユーザーが入力したデータがすでに取得されており、それがデータ モデルに組み込まれています。
React は一方向のデータ フローであり、データは主に親ノードから子ノードに (props を介して) 渡されます。
最上位 (親) プロパティの 1 つが変更されると、React はすべての子ノードを再レンダリングします。
React では、データは親コンポーネントから子コンポーネントへの一方向にのみ流れます。兄弟コンポーネント間でデータが共有される場合、データは親コンポーネントに保存され、データを必要とする両方の子コンポーネントに渡される必要があります。
知識を広げてください:
vueとreactの主な違い
2. vue の構文は比較的シンプルで小規模なプロジェクトの作成に適していますが、react は大規模なアプリケーションを中心とした Web アプリやネイティブ アプリの開発に適しています。
3. Vue はレンダリング速度が速く、サイズが小さいのに対し、React はより大きなエコシステムを備えており、より多くのツール サポートを提供できます。
3. テンプレートの描画方法の違い
表面上、テンプレートの構文は異なります。React は JSX を通じてテンプレートをレンダリングします。 Vue は拡張された HTML 構文を通じてレンダリングしますが、実際にはこれは単なる表面的な現象にすぎません。React は JSX に依存する必要はありません。
深いレベルでは、テンプレートの原則が異なります。これが本質的な違いです。React は、補間、条件、ループなど、コンポーネント JS コード内のネイティブ JS を通じてテンプレートに共通の構文を実装します。これらはすべて JS を通じて実装されます。より純粋でよりオリジナルな構文。 Vue は、コンポーネントの JS コードから分離された別のテンプレートの命令を通じて実装されます。たとえば、これを実現するには条件ステートメントに v-if が必要です。このアプローチは少し独特で、HTML を混乱させます。
たとえば、React の利点を説明すると、React の render 関数はクロージャー機能をサポートしているため、インポートしたコンポーネントを render で直接呼び出すことができます。しかし、Vue では、テンプレートで使用されるデータを転送するためにこれにハングする必要があるため、コンポーネントをインポートした後、これをコンポーネント内で再度宣言する必要があります。これは明らかに非常に奇妙ですが、行う必要があります。