仮想DOMの前に、基本的な理解もあります.
要するに、jsデータ構造を使用して、htmlのdom構造ツリーを記述します
まず、なぜ仮想 DOM を使用するのでしょうか。
公式の答えは、diff 最小洗練アルゴリズムは仮想 DOM で発生する、つまり、
前述のノード間の比較は html 要素では発生せず、js の仮想 DOM で発生するというものです。
ノード依存のデータ変更, 違いを比較して更新方法を知る. 最も邪魔にならない場所でも更新の目的を完了することができます. この比較プロセスは diff アルゴリズムと呼ばれ, このプロセスは js のこれらの仮想 DOM ノードで実行されます
.の一部
じゃあどうやってドムが仮想ドムになるのか考えなきゃいけないの？
ただし、この知識はテンプレート コンパイルの原則のカテゴリに属し、時間の問題があるため、ここでは説明しません。
仮想 DOM が何を介してレンダリングされるかを知る必要があり、プロンプトは h 関数を介してレンダリングされます。
h はあまり意味がありません. コードを書くときの関数の作成者の名前なので, 将来ソースや技術スタックの命名規則をオープンにしたい場合, それは依然として非常に重要です. 後で他の人があなたのコードを参照するとき, 彼らはまた、逆に関数を推測します。
h 関数の役割は、仮想ノードを生成することです.
たとえば、このように h 関数を呼び出します
h('a',{
props: {
href: 'https://blog.csdn.net/weixin_45966674?type=blog'}}，'测试标签')
次に、この関数は、このような仮想ノードを作成するのに役立ちます
{
'sel': 'a'
"data": {
props: {
href:'https://blog.csdn.net/weixin_45966674?type=blog'
}
},
"text": '测试标签'
}
彼をそのように見る
<a href= "https://blog.csdn.net/weixin_45966674?type=blog">测试标签</a>
次に、それを見てみましょう。つまり、h タグの最初のパラメーターは、作成するタグ、" div"、"p"、"h1" などの文字
列型です。2番目のパラメーターはオブジェクトです.ここでは, 最初に {} の外にオブジェクトがあります.次に, 属性を表すフィールド props が最初になければなりません. キー値に対応する json オブジェクトが label 属性である場合があります.例えば
{
props: {
href: "链接",
name: "name值"
}
}
3つ目は言うまでもなく、ラベルの内容です
次に、この方法でvnode とも呼ばれる仮想 dom ノードを宣言します。
ここで、v は virtual という単語に対応し、仮想
ノードがノード仮想ノードであることを意味します。
まず、h は仮想 dom ノードを宣言することです. dom ノードを h に転送して仮想 dom ノードになる方法については、テンプレートのコンパイルの原則と時間の問題が含まれます. dom play 理解する
仮想ノードには主に次の属性があります:
children はその子ノードであり、サブ要素は undefined であり、サブセット データがないことを示します.これは、実際の dom ノードに対応する
、先ほど見た彼のラベル属性 elm です。
この要素の. If it is undefined, it means this node. The dom tree key has not been uploaded,
which means the unique identifier of the node. 特に vue 開発で要素のレンダリングをループするときは、 key 属性を追加する必要がありますselを区別するためのタグです
。どのタグを使用するかは、h" div などのタグ名の最初のパラメーターです"
テキストはテキストを意味します
さて、それについて話すだけではなく、
上で作成したケースを開き、
src の下にある index.js を見つけて、
パッケージの外側のすべてのコードを kill し
、src の下の index.js コードを次のように変更します。
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from "snabbdom";
//创建虚拟节点
var vonm = h("a",{
props: {
href: "https://blog.csdn.net/weixin_45966674?type=blog"
}},
"测试虚拟dom");
console.log(vonm);
ここで、h 関数はそれほど強力ではないことを知る必要があります。実際には html の dom ツリーにノードを追加するわけではありません。js で仮想 dom ノードを作成するだけです。h 関数はそれほど強力ではありません
。プロジェクト
を開いてコンソールを開きます, コンソールを使用します.log出力によって生成されたhによって生成された仮想ノードはここにあります.
その属性のいくつかを簡単に見てみましょう
. json.
彼をページの DOM ツリーに移動させましょう。
この時点で、パッチ関数を作成する必要があります
後で記事を更新します. patch 関数については簡単に説明します. これは diff アルゴリズムのコア関数です. 非常に便利です.
この
記事では次の記事では説明しません.
src の下の index.js コードを次のように変更します。
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from "snabbdom";
//创建patch函数
const patch = init([
classModule,
propsModule,
styleModule,
eventListenersModule
]);
//创建虚拟节点
var vonm = h("a",{
props: {
href: "https://blog.csdn.net/weixin_45966674?type=blog"
}},
"测试虚拟dom");
console.log(vonm);
//让虚拟节点上树
const container = document.getElementById('container');
patch(container,vonm);
ここでは init を使用して配列を渡します.これはパッチで公開される他のすべての依存関係です.これについては後で特定のパッチを公開します.最初に h と仮想ノードを理解しましょう.次にノードを取得して取得する必要があります. the id
through
document.getElementById The node is the container
, and the first parameter is the node to bemounted, and the second parameter is the virtual dom node.
プロジェクトを再度実行すると、仮想ノードが立ち上がり、実際のノードになります
ハイパーリンクをクリックすると、実際に表示されますジャンプ、
ラベル属性はすべて自然に有効ですが
、クリックするたびに現在のインターフェイスで開きます
html を学べば、誰もがそれを解決する方法を知っています.
src の下の index.js をこのように変更しました
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from "snabbdom";
//创建patch函数
const patch = init([
classModule,
propsModule,
styleModule,
eventListenersModule
]);
//创建虚拟节点
var vonm = h("a",{
props: {
href: "https://blog.csdn.net/weixin_45966674?type=blog",
target: "_blank"
}},
"测试虚拟dom");
console.log(vonm);
//让虚拟节点上树
const container = document.getElementById('container');
patch(container,vonm);
props: "_blank" に属性ターゲットを追加して、
別のインターフェイスで開かれるようにします
ここで知っておく必要があるのは、1 つのノードに対して 1 つの仮想 DOM しかツリー上に置くことができないということですが、フォローアップ記事に埋め込むことができ
ます
。期間。