VueとReactはどのような違いがありますか？

一、モニターデータの変化の実現原理が異なる

Vueはgetter/setterといくつかの関数のハイジャックを通じて、データの変化を正確に知ることができます。特別な最適化を必要としないで、良い性能を達成することができます。

Reactデフォルトは、参照を比較することによって行われ、最適化しないと、不必要なVDOMが大量にレンダリングされる可能性がある

。
なぜReactは正確にデータの変化を監督しないのですか？これはVueとReactの設計理念の違いで、Vueは可変データを使っていますが、Reactはデータの可変性をより強調しています。だから善し悪しはないというべきか、Vueはもっと簡単で、Reactは大型アプリケーションを構築する時にもっとロバストです。
二、データストリームの違い

みんなが知っています。Vueのデフォルトは双方向バインディングをサポートしています。Vue 1.0では、2つの双方向結合が可能です。

props
v-model

はVue 2.xの中で第1種を取り除いて、つまり親子のコンポーネントの間で双方向に結び付けることができませんでした（しかし、文法飴を提供しました。自動的にイベントを通して修正してくれます）、そしてVue 2.xはもうコンポーネントが自分のpropsに対していかなる修正を行うことを奨励しませんでした。

しかし、Reactは誕生当初から双方向バインディングをサポートしておらず、Reactは一方向データストリームを提唱しています。彼はオン・チャング・セット（）モードと呼ばれています。でも、私たちはVuexやReduxなどの一方通行のデータフローの状態管理フレームを使っていますので、その違いを感じられないことが多いです。

三、HOCとmixins
Vueでは私たちが異なる機能を組み合わせる方式はmixinを通して、ReactではHOCを通します。Reactも最初はmixinsを使っていましたが、このようなやり方はコンポーネントに侵入するのが強すぎて多くの問題を引き起こすと思い、mixinxを捨ててHoCに変えました。mixinについてはどこが悪いですか？React公式のこの文章を参照してください。Vueはずっとmixinを使って実現しています。
しかし、なぜVueはHOC方式で実現しないのですか？
高次コンポーネントの本質は高次関数であり，Reactのコンポーネントは純粋な関数であるので，高次関数はReactにとって非常に簡単である。でも、Vueはだめです。Vueの中のコンポーネントは包装された関数です。簡単ではないのはコンポーネントを定義する時に入ってきたオブジェクトや関数です。たとえば私たちが定義したテンプレートはどうやってコンパイルされますか？例えば声明のpropsはどうやって受信しましたか？これらは全部vueがコンポーネントのインスタンスを作る時に陰的にすることです。vueさんは黙々としていろいろなことをしてくれましたので、私達自身は直接にコンポーネントの声明を包装して高次のコンポーネントに戻したら、この包装されたコンポーネントは正常に動作しません。
四、コンポーネント通信の違い

Vueにはコンポーネント通信が可能な3つの方法がある。

親コンポーネントは、プロpsを介してサブアセンブリにデータまたはコールバックを伝達し、コールバックを伝達することができるが、データのみを一般的に送信し、イベントのメカニズムによって、サブアセンブリの親コンポーネントへの通信

を処理する。

サブコンポーネントは、イベントを通じて親コンポーネントにメッセージを送信する

。

は、V 2.0に新たに追加されたprovide/injectによって、親コンポーネントからサブアセンブリへのデータの注入を実現し、複数の階層にまたがることができる。

Reactには、対応する3つの方法があります。

親コンポーネントは、プロpsによって、データをサブアセンブリに転送することができ、または、

にフィードバックすることができる。

はcontextを通じて階層的な通信を行うことができます。これはprovide/injectの役割と同じです。

React自体はカスタムイベントをサポートしていないことが分かります。Vue中性子コンポーネントは、イベントとコールバック関数を父コンポーネントに伝達し、Vueはイベントを使用する傾向があります。しかし、Reactでは私たちはすべてコールバック関数を使っています。これは彼らの2つの最大の違いかもしれません。
五、レンダリングテンプレートの違い
表層では、テンプレートの文法が違います。

ReactはJSXによるレンダリングモデル

である。

、Vueは一種の拡張されたHTML文法によってレンダリングされる。

しかし、これは表面的な現象です。結局ReactはJSXに依存しなくてはいけません。深層では、テンプレートの原理が違っています。これこそ彼らの本質的な違いです。

ReactはコンポーネントJSコードの中で、元のJSを通じてテンプレートの中のよくある文法を実現します。例えば、補間、条件、循環などはJS文法によって実現された

です。

VueはコンポーネントJSコードと分離した単独のテンプレートであり、条件文がv-i-fを必要とするなどの命令によって実現される。

reactにおけるレンダー関数はクローズド特性をサポートしているので、我々importのコンポーネントはレンダーで直接呼び出されます。しかし、Vueでは、テンプレートで使用するデータはすべてthisにかけて中継しなければならないので、私たちはimponentsのコンポーネントが終わったら、componentsの中で再声明を出す必要があります。これは明らかにおかしいですが、またこのようなやり方をしなければなりません。
六、VuexとReduxの違い
表面的には、store注入と使用方法に違いがあります。Vuexでは、$storeはコンポーネント・インスタンスに直接注入されるので、より柔軟に使用することができる。

dispatchとcomitを使って更新

を提出します。

は、mapStateまたは直接にthis.$storeによってデータを読み込みます。

Reduxでは、私たちの各コンポーネントは必要なconnectで必要なpropsとdispatchを接続します。
また、Vuexはもっと柔軟で、コンポーネントの中でdispatch actionもcomit udatesもできます。Reduxではdispatchしかできません。直接reducerを呼び出して修正することはできません。
実現原理から言えば、最大の違いは2点です。

Reduxは可変データではなく、Vuexのデータは可変です。Reduxは毎回新しいstateで古いstateを交替します。Vuexは直接

を修正します。

Reduxはデータの変化を測定する時、diffの方式を通じて(通って)違いを比較したので、Vuexは実はVueの原理と同じで、getter/setterを通して比較したのです。

七、diffはアルゴリズムが違います。
両方の流れの考え方は同じで、両方の仮定に基づいています。

の異なるコンポーネントは、異なるDOM構造を生成する。typeが合わない時、DOMに対応して操作して直接古いDOMを破壊して、新しいDOMを創建します。

同じレベルのサブノードのセットは、唯一のkeyによって区別されてもよい。

しかし、両者のソースの実現には違いがあります。

Vueはsnabbdomライブラリに基づいて、より良い速度とモジュール機構があります。Vue Diffは双方向チェーンを使って比較しながらDOMを更新します。

Reactは主にdiffキューを使用して、どのDOMを更新する必要がありますか？patchツリーを取得して、また一括操作でDOMを更新します。

八、事件のメカニズムが異なる
Vue

Vue原生イベント使用標準Webイベント

Vueコンポーネントカスタムイベント機構は、親子コンポーネント通信ベース

である。

Vue snabbdomライブラリのモジュールプラグインを合理的に利用しました。

React

React原生事件は包装されています。すべての事件はトップレベルのdocumentで傍聴して、ここで合成事件が発生します。このセットに基づいて，ウェブDOMとの強い結合ではなく，端を横切ってイベント機構を使用することができる。

Reactコンポーネントにイベントはなく、親子コンポーネント通信はprops

を使用する。
以上がVueとReactの違いの詳細です。VueとReactに関する資料は他の関連記事に注目してください。