＃一般
- データ ドリブン ビュー
- コンポーネント化
- どちらも仮想 DOM を使用します
1. データドリブン ビュー
jquery の時代には、頻繁に DOM を操作してページの効果やインタラクションを実現する必要がありますが、Vue と React はこの問題点を解決し、データ駆動型のビュー メソッドを採用して DOM の操作の頻繁な操作を隠します。なので、開発するときはデータの変更だけ気をつければいいのですが、両者は実装方法が異なります。
2. コンポーネント化
React と Vue はどちらもコンポーネント化の考え方に従います. UI レイヤーに焦点を当て、ページをいくつかの小さなブロックに分割します. これらのブロックはコンポーネントであり、コンポーネントの組み合わせとネストが最終的な Web インターフェイスを形成します. したがって、親子コンポーネント転送、データ状態管理、フロントエンド ルーティング、スロットなど、開発中に同じルーチンがあります。
3.仮想DOM
VueもReactもVirtual DOM+Diffアルゴリズムを使っており、VueのTemplate template+options apiの書き方でも、ReactのClassやFunctionの書き方でも、最終的にはrender関数が生成され、render関数はVNode(のデータ構造)を返します。仮想 DOM 、基本的にはツリー)。
UIが毎回更新されると、レンダリングに従って最新のVNodeが再生成され、以前にキャッシュされた古いVNodeと比較され、Diffアルゴリズム（フレームワークのコア）を使用して実際のDOMが更新されます（仮想 DOM は js オブジェクト構造であり、js エンジンでも同じであり、実際の DOM はブラウザーのレンダリング エンジン内にあるため、仮想 DOM の操作は実際の DOM の操作よりもはるかに安価です)。
＃違い
VueもReactもユーザーインターフェースを構築するためのフレームワークですが、大きな違いもあり、まず両者の核となる考え方が異なります。
1. 核となるアイデアの違い
Vue 開発の位置付けは、フロントエンド開発の敷居をできるだけ低くして、より多くの人がより早く開発を開始できるようにすることです。これが Vue の主な機能です。データの変更を検出する感度と精度が向上した、柔軟で使いやすいデータ インターセプト/プロキシ用のプログレッシブ フレームワークです。
React の当初からのポジショニングは、UI 開発の新しいアイデアを提案することです。大企業 Facebook が支援する React は、最初から注目とユーザーを欠いていませんでした。React がやりたいことは、フロントエンドの開発方法をより良い方法で覆すことです。React は関数型プログラミング (純粋なコンポーネント)、不変データ、一方向データ フローを提唱していますが、もちろん、双方向が必要な場合は、onChange や setState などを使用して手動で実装することもできます。
両者の核となる考え方の違いにより、その後の Vue と React の設計には多くの違いがあります。
2. コンポーネントの書き方の違い
Reactが推奨するアプローチはJSX+インラインスタイル、つまりHTMLもCSSもすべてjavascriptで書く、つまりすべてjsで書くアプローチ、Vueが推奨するアプローチはテンプレートの単一ファイルコンポーネント形式（わかりやすい、わかりやすい）です。つまり、html、css、および js は同じファイルに記述されます (vue は JSX の記述もサポートします)。この違いは、部分的には、2 つのコア アイデアの違いによるものです。
3.差分アルゴリズムが異なる
従来の diff アルゴリズムは、各ノードをループして再帰することです。2 つのツリーのすべてのノードを 1 つずつ比較するには、O(n²) の複雑さが必要です. 比較プロセス中に、古いノードが新しいツリーに見つからないことがわかり、古いノードを削除する必要があり、ノード(適切なノードを削除する必要があります) 時間計算量は O(n) 同様に新しいノードを追加する計算量も O(n) 2 本の木を比較する計算量は O(n) (n³)。従来の Diff アルゴリズムの複雑さは高すぎます。vue2.x は Virtual Dom に参加し、react には同じ diff 最適化原則があります (アルゴリズムの複雑さを O(n) に減らします)。
2 つのプロセスの考え方は似ています。
コンポーネントが異なれば、異なる DOM 構造が生成されます。スタイルが異なる場合、対応する DOM 操作は、古い DOM を直接破棄し、新しい DOM を作成することです。同じレベルの子ノードのグループは、一意のキーで区別できます。
React の Diff アルゴリズムのコア実装
React は最初に新しいコレクション for(name in nextChildren) をトラバースし、一意のキーを使用して同じノードが古いコレクションに存在するかどうかを判断します。そうでない場合は作成し、そうであれば if(preChild === nextChild) は新しいコレクションのノードの位置を古いコレクションの lastIndex と比較し、(child._mountIndex < lastIndex) が移動操作を実行する場合、そうでない場合は移動操作は実行されません。トラバーサル プロセス中に、新しいコレクションにノードがなく、古いコレクションにノードがあることが判明した場合、そのコレクションは削除されます。
Vue の Diff アルゴリズムのコア実装
updateChildren は vue diff の中核であり、プロセスは次のように要約できます。
古い子と新しい子は、それぞれ先頭と末尾に StartIdx と EndIdx の 2 つの変数を持ち、それらの 2 つの変数を比較する、合計 4 つの比較方法があります。4 つのメソッドのいずれも一致しない場合、キーが設定されている場合、キーは比較に使用されます. 比較中、変数は中央に傾きます. StartIdx > EndIdx が古い子と新しい子の少なくとも 1 つを示すと、 children がトラバースされた場合、比較は終了します。
Vue2 のコア Diff アルゴリズムは、両端比較のアルゴリズムを採用し、同時に、古い子と新しい子の両端から比較を開始し、キー値を使用して再利用可能なノードを見つけ、関連する操作を実行します。React の Diff アルゴリズムと比較すると、同じ状況で移動するノードの数を減らすことができ、不要なパフォーマンスの損失を減らし、より洗練されています。
4. レスポンシブの原則が異なる
ビュー:
Vue は、コレクション、自動最適化、および変数データに依存しています。
Vue は、データのすべての属性を再帰的にリッスンし、それらを直接変更します。
データが変更されると、参照されているコンポーネントを自動的に見つけて再レンダリングします。
反応する
React は手動で最適化されたステート マシンに基づいており、データは不変です. 古い状態を置き換えるために新しい状態を駆動するには setState が必要です. コンポーネントをルートディレクトリとしてデータが変更されると、すべてデフォルトで再レンダリングされるため、制御するには React で shouldComponentUpdate ライフサイクル関数メソッドが必要です。
5. その他の違い
上記の4つの違いに加えて、細かい数字にも多くの違いがあります。例えば API の違いはかなり大きく、Vue ではより使いやすくするために命令やフィルターなどの概念が導入されているほか、watch や compute などの非常に簡単に使用できる多数のオプション API が導入されています。使用。
ただし、React には API が比較的少ないため、JavaScript の基礎が比較的しっかりしていれば、非常に簡単に始めることができます。