反応と vue 仮想 dom の違いは何ですか?

react と vue の仮想 dom の間に違いはありません。react と vue の仮想 dom はどちらも、js オブジェクトを使用して実際の DOM をシミュレートし、仮想 DOM の差分を使用して実際の DOM の更新を最小限に抑えます。ロスは粒度に応じて種類に分けられ、同じレベルのDOMノードを比較し、追加、削除、移動の操作を行います。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react の仮想 dom と vue の違いは何ですか

違いはありません。

react と vue の仮想 DOM は同じで、どちらも JS オブジェクトを使用して実際の DOM をシミュレートし、仮想 DOM の差分を使用して実際の DOM の更新を最小限に抑えます。

いくつかの実装を除いて、2 つの実装のうち前半 (JS オブジェクトを使用して実際の DOM をシミュレートする) はほぼ同じです。

後半 (実際の DOM の更新を最小限に抑えるために仮想 DOM diff を使用) では、置換、削除、挿入などを含む 2 つのアルゴリズムは似ています。

Vue と React はどちらも仮想 dom アルゴリズムを使用します。実際の DOM の更新を最小限に抑え、不必要なパフォーマンスの損失を軽減します。

粒度によりツリー diff、コンポーネント diff、要素 diff に分かれており、ツリー diff は同じレベルの DOM ノードを比較し、追加、削除、移動の操作を行います。コンポーネントが見つかると、ツリー diff プロセスが再起動されます。

DOM の 2 つの更新戦略は異なりますが、react はトップダウンの完全な diff を使用し、vue は部分的なサブスクリプション モデルを使用します。しかし、これは実際には仮想 dom とは何の関係もありません。

dom の更新戦略は異なります。

#react は上から下まで完全に diff になります。 #vue は、各コンポーネントの依存関係を追跡します。コンポーネント ツリー全体を再レンダリングする必要はありません。

1. React では、状態が変化すると、コンポーネント ツリーが上から下まで完全に比較され、ページが再レンダリングされ、新しい仮想 dom ツリーが再生成され、新旧の dom ツリーが比較されます。パッチ適用を行うパッチ適用方法はローカルでDOMを更新するため、親コンポーネントの更新による不必要な子コンポーネントの更新を避けるため、Reactは shouldComponentUpdate で論理的に判断し、不要なレンダリングを減らし、仮想DOMを再生成して差分を実行します。 .

2. vue では、これらすべてのデータ プロパティを Object.defineProperty を通じてゲッター/セッターに変換します。同時に、ウォッチャー インスタンス オブジェクトは、コンポーネントがレンダリングされるときにプロパティを dep として記録します。dep アイテムの setter が呼び出されると、watch に再計算するように通知され、関連付けられたコンポーネントが更新されます。

Diff アルゴリズムは、要素のキーを使用して要素が追加、削除、または変更されたかどうかを判断するため、要素の不必要な再レンダリングが削減されます。

推奨される学習: 「

react ビデオ チュートリアル

」

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