Vue の仮想 DOM は、js を使用して DOM 構造をシミュレートします。この記事の内容は、vue 仮想 DOM とは何かを友達に紹介することです。 vueの仮想DOMの使い方とともに、記事の具体的な内容を見ていきましょう。
1. 仮想 DOM が必要な理由
先ほど、テンプレートの解析とレンダリングは、ページを直接編集する代わりにドキュメントのフラグメントを使用して、コンパイル機能を通じて行われる単純な Vue のようなフレームワークを最初から作成しました。 DOM 要素の数は、データの変更が完了した後、appendChild 関数を通じて実際の DOM をページに挿入します。
ドキュメントのフラグメントが使用されていますが、実際の DOM は引き続き操作されます。
そして、DOM の操作にはコストがかかることがわかっているため、vue2.0 は仮想 DOM を使用して実際の DOM の操作を置き換え、最後に何らかのメカニズムを使用して実際の DOM の更新を完了し、ビューをレンダリングします。
いわゆる仮想 DOM は、実際には JS を使用して DOM 構造をシミュレートし、DOM の変更操作を JS 層に配置して DOM の操作を最小限に抑えます (主に、JS の操作が JS の操作よりもはるかに高速であるためだと個人的には考えています) DOM の操作) 回数がわかると、JS が効率的に実行されます)。次に、仮想 DOM の変更を前後 2 回比較し、変更された部分のみが再レンダリングされ、変更されていない部分は再レンダリングされません。
たとえば、次のような DOM 構造があります。
<ul id="list">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li></ul>
JS オブジェクトを完全に使用して上記の DOM 構造をシミュレートでき、シミュレーション後は次の構造になります。
var vdom = {
tag: 'ul',
attr: {
id: 'list',
},
children: [
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 1']
},
},
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 2']
}
}
]
}
JS によってシミュレートされた DOM 構造は、すべての DOM ノードの属性とメソッドをシミュレートするわけではないことに注意する必要があります (DOM ノード自体には多くの属性があり、これが DOM 操作のパフォーマンスを消費するポイントでもあるため) , ただし、データ操作に関連するプロパティとメソッドの一部のみをシミュレートします。
2. vue仮想DOMの使い方
Vueはバージョン2.0でvdomを導入しました。その vdom は、snabbdom ライブラリによって行われた変更に基づいています。 snabbdom は、オープンソースの vdom ライブラリです。
snabbdom の主な機能は、受信した JS でシミュレートされた DOM 構造を仮想 DOM ノードに変換することです。
まず、h 関数を通じて JS でシミュレートされた DOM 構造を仮想 DOM に変換し、次に patch 関数を通じて仮想 DOM を実際の DOM に変換してページにレンダリングします。
ページの最小限のレンダリングを保証するために、snabbdom は Diff アルゴリズムを導入します。これは、Diff アルゴリズムを使用して前後の 2 つの仮想 DOM の違いを見つけ、変更された DOM ノードのみを再レンダリングせずに更新します。 DOM ノードを変更しました。
ここでは、snabbdom がどのようにこれを行うかを説明するために snabbdom のソースコードを分析するつもりはありません (主に、この段階ではそのレベルではないためです、笑) さらに、多くの学生がすでに同様の分析を行っています。記事の最後に添付します）。
snabbdom を使用する観点から、Vue の仮想 DOM がビューのレンダリングをどのように完了するかを見ていきます。
まず、snabbdom の 2 つのコア API の機能を見てみましょう。
h() 関数: 受信した JS シミュレートされた DOM 構造テンプレートを vnode に変換します。 (vnode は純粋な JS オブジェクトです)
patch() 関数: 仮想 DOM ノードをページにレンダリングします。
snabbdom の実際の機能を確認するための例を提供します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title></head><body>
<p id="container"></p>
<button id="btn-change">change</button>
<!-- 引入snabbdom库，先不必纠结为什么这样引入，以及每个文件的作用。本篇文章只是介绍一下虚拟DOM的工作方式，并不涉及原理解析
主要是因为博主目前功力尚浅，有兴趣的小伙伴可以另行研究 -->
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
<script>
//定义patch函数
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
]) //定义h函数
var h = snabbdom.h; //生成一个vnode
var vnode = h('ul#list',{},[
h('li.item',{},['Item 1']),
h('li.item',{},['Item 2']),
])
//console.log(vnode);
//获取container
var container = document.getElementById('container');
patch(container,vnode);//初次渲染
var btn = document.getElementById('btn-change');
btn.onclick = function() {
var newVnode = h('ul#list',{},[
h('li.item',{},['Item 1']),
h('li.item',{},['Item B']),
h('li.item',{},['Item 3']),
])
patch(vnode,newVnode);//再次渲染
vnode = newVnode;//将修改后的newVnode赋值给vnode
}
</script>
</body>
</html>
アイデア分析:
まず、h 関数を通じて仮想 DOM ノードを作成し、patch 関数を通じて仮想 DOM をページにレンダリングします。
btnボタンをクリックすると、ul#listリストのデータが更新され、2番目のli要素の値が変更され、新しいli要素が追加されます。最初のli要素の値は変更されません。 patch 関数を使用して、更新されたデータを再度ページにレンダリングします。 2 番目と 3 番目の li のみが更新され、最初の li は変更されていないため再レンダリングされないことがわかります。
vue でのテンプレートの解析とレンダリングの核心は、snabbdom の h() と patch() に似た関数を通じて、最初のレンダリングの場合はテンプレートがまず vnode に解析され、次に patch(コンテナー、vnode) は、vnode をページにレンダリングします。これが二次レンダリングの場合は、patch(vnode, newVnode) を使用して、最初に Diff アルゴリズムを通じて元の vnode と newVnode の違いを比較し、最小限のコストでページを再レンダリングします。 。
おすすめ関連記事:
以上がvue仮想DOMとは何ですか? vueの仮想DOMの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AMJavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。
CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AMCおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。
Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AMJavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。
Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AMPythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AMCとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
