深浅にVue.js-V Nodeを出す

一、何がVNodeですか?
(1)Vue.jsにはVNodeクラスがあり、それを使用して異なるタイプのvnodeのインスタンスを実装でき、異なるタイプのvnodeのインスタンスはそれぞれ異なるタイプのDOM要素を表している.
(2)本当はvnodeは名前だけで、本質的にはJavascriptの中の一つの普通の対象であり、VNode類から実用化された対象である.このJavascriptオブジェクトを使用して、実際のDOM要素を記述すると、DOM要素のすべての属性はVNodeというオブジェクトに対応する属性が存在する.
(3)vnodeは、ノード記述オブジェクトとして理解され、どのように真実なDOMノードを作成すべきかを説明する.例えば、一つの要素ノードの名前を表し、textは一つのテキストノードのテキストを表し、childrenはサブノードなどを表します.
(4)vnodeは真実なDOM要素を表しています.すべての本当のDOMノードはvnodeを使って作成してページに挿入します.(vnode=)DOM=>ビュー)
(5)vnodeとビューは一対一で対応しています.私たちはvnodeをJavascriptオブジェクトバージョンのDOM要素として理解することができます.
(6)ビューをレンダリングするプロセスは、まずvnodeを作成し、その後vnodeを使って本当のDOM要素を生成し、最後にページレンダリングビューを挿入する.
二、VNodeの役割
(1)ビューをレンダリングするたびにvnodeを作成し、実際のDOMを使用してページに挿入するので、前回のレンダリングビューの際に作成されたvnodeをキャッシュして、後でビューを再レンダリングする必要があるたびに、新たに作成されたvnodeと前回キャッシュされたvnodeとを比較して、それらの間の違いを確認します.これらの異なるところを探し出し、これに基づいて真実のDOMを修正する.
(2)Vue.jsは現在状態の探測戦略に中程度の粒度を採用している.状態が変化した場合は、コンポーネントレベルのみに通知し、コンポーネント内で仮想DOMを使用してビューをレンダリングする.
(3)ある状態が変化したら、この状態を使ったコンポーネントだけを通知します.
(4)コンポーネントが使用している多くの状態の中で一つが変化したら、コンポーネント全体を再レンダリングする.
三、Vnodeのタイプ
(1)vnodeのタイプ
注釈ノード
テキストノード
元素ノード
コンポーネントノード
関数コンポーネント
クローンノード
(2)vnodeはJavascriptの中の一つのオブジェクトであり、異なるタイプのvnodeの間は属性が異なるだけで、正確には有効属性が異なる.VNodeクラスを使用してvnodeを作成する場合、パラメータを例にして属性を設定すると、無効な属性はデフォルトでundefinedまたはfalseとして付与されます.vnodeに対して無効な属性はそのまま無視すればいいです.

注釈ノード

export const createEmptyVNode = text =>{
    const node = new VNode();
    node.text = text; 
    node.isComment = true;
    return node
}

(1)一つの注釈ノードは二つの有効な属性しかありません.textとisComment、残りの属性は全部デフォルトのundefinedまたはfalseです.

//     

//   vnode  ：
{
    text:"    ",
    isComment:true
}

テキストノード

export function createTextVNode(val){
    return new VNode(undefined,undefined,undefined,String(val))
}

(1)テキストタイプのvnodeが作成された場合、text属性は一つしかありません.

//     vnode
{
    text:"Hello Berwin"
}

クローンノード

(1)クローンノードは、新たに作成されたノードとクローンされたノードの属性が一致するように、既存のノードの属性を新たなノードに割り当て、クローン効果を実現する.
(2)作用:静的ノードとスロットノードを最適化する.
(3)静的ノードを例にとると、コンポーネント内のある状態が変化した後、現在のコンポーネントは仮想DOMによってビューを再レンダリングし、静的ノードはそのコンテンツが変更されないので、最初のレンダリングはレンダリング関数を実行してvnodeを取得する必要がある以外に、後続の更新はレンダリング関数を実行してvnodeを再生成する必要がない.したがって、このとき、クローンノードを作成する方法を用いて、vnodeを一つの部分にクローンし、クローンノードを用いてレンダリングする.このようにして、レンダリング関数を再実行して新しい静的ノードのvnodeを生成する必要がなく、ある程度の性能を向上させる.

export function cloneVNode(vnode,deep){
    const cloned = new VNode(
        vnode.tag,
        vnode.data,
        vnode.children,
        vnode.text,
        vnode.elm,
        vnode.context,
        vnode.componentOptions,
        vnode.asyncFactory
    )
    cloned.ns = vnode.;
    cloned.isStatic = vnode.isStatic;
    cloned.key = vnode.key;
    cloned.isComment = vnode.isComment;
    cloned.isCloned = true;
    if(deep&&vnode.children){
        cloned.chlidren = cloneVNodes(vnode.children);
    }
    return cloned;
}

(4)既存のノードをクローンする場合は、既存のノードの属性をすべて新しいノードに割り当てるだけでよい.
(5)クローンノードとクローンノードとの間の唯一の違いはisCloed属性であり、クローンノードのisCloedはtrueであり、クローンされた元ノードのisCloedはfalseである.

要素ノード

(1)要素ノードには通常、以下の4つの有効な属性が存在する.

(例えば、ul、p、li、divなど).

data:この属性はいくつかのノードのデータを含んでいます.例えば、atrs、class、スタイルなどです.

children:現在ノードのサブノードリスト.

context:現在のコンポーネントのVue.jsの例です.

(2)例
真実の要素ノード

HelloBerwin

対応するvnode

{
	children:[VNode,VNode],
	context:{...},
	data:{...},
	tag:"p",
	....
}

コンポーネントノード

(1)コンポーネントノードと要素ノードは類似しており、以下の2つの固有の属性がある.

componentOptions:コンポーネントノードのオプションパラメータにはpropdata、タグ、チルドレンなどの情報が含まれています.

component Instance:コンポーネントの例、つまりVue.jsの例.実際には、Vue.jsでは、各コンポーネントはVue.jsのインスタンスです.

(2)例
コンポーネントノード

対応するvnodeは以下の通りです.

{
	componentInstance:{...},
	componentOptions:{...},
	context:{...},
	data:{...},
	tag:"vue-component-1-child",
	....
}

関数式コンポーネント

(1)関数式コンポーネントとコンポーネントノードは似ています.2つの固有の属性functional Contectとfunctional Optionsがあります.
(2)通常、関数式コンポーネントのvnodeは次のようです.

{
	functionalContext:{...},
	functionalOptions:{...},
	context:{...},
	data:{...},
	tag:"div",
	....
}

四、まとめ
(1)vnodeはクラスであり、異なるタイプのvnodeのインスタンスを生成することができ、異なるタイプのvnodeは異なるタイプの真実のDOM要素を表す.
(2)Vue.jsはコンポーネントに仮想DOMを採用してビューを更新していますので、属性が変化するとコンポーネント全体を再レンダリングする操作を行いますが、コンポーネント内はすべてのDOMノードが更新する必要があるわけではないので、vnodeキャッシュを現在新たに生成したvnodeと前回キャッシュしたoldVnodeとを比較します.更新が必要な部分だけDOM操作すると多くの性能が向上します.
(3)vnodeには様々なタイプがありますが、それらは本質的にはすべてVnodeクラスのインスタンスから化されたオブジェクトであり、その唯一の違いは属性が異なるだけです.