Vue.js での VNode の使用

VNodeとは

vue.js には VNode クラスがあり、これを使用してさまざまな種類の vnode インスタンスをインスタンス化できます。さまざまな種類の vnode インスタンスはそれぞれ、さまざまな種類の DOM 要素を表します。

たとえば、DOM 要素には要素ノード、テキスト ノード、コメント ノードなどが含まれ、vnode インスタンスも要素ノード、テキスト ノード、コメント ノードに対応します。

VNode クラスのコードは次のとおりです。

 デフォルトクラスVNodeをエクスポートする{
    コンストラクター(タグ、データ、子、テキスト、elm、コンテキスト、componentOptions、asyncFactory) {
       this.tag = タグ
        this.data = データ
        this.children = 子供
        this.text = テキスト
        this.elm = エルム
        this.ns = 未定義
        this.context = コンテキスト
        this. functionalContext = 未定義
        this. functionalOptions = 未定義
        this. functionalScopeId = 未定義
        this.key = データ && データ.key
        this.componentOptions = コンポーネントオプション
        this.componentInstance = 未定義
        this.parent = 未定義
        this.raw = 偽
        this.isStatic = false
        this.isRootInsert = true
        this.isComment = false
        this.isCloned = false
        this.isOnce = false
        this.asyncFactory = 非同期ファクトリー
        this.asyncMeta = 未定義
        this.isAsyncPlaceholder = false
    }
    子を取得（）{
        this.componentInstance を返す
    }
 }
 

上記のコードからわかるように、vnode は単なる名前です。本質的には、これは通常の JavaScript オブジェクトであり、VNode クラスからインスタンス化されたオブジェクトです。この JavaScript オブジェクトを使用して実際の DOM 要素を記述すると、DOM 要素のすべての属性には VNode オブジェクト上に対応する属性が存在します。

簡単に言えば、vnode は実際の DOM ノードを作成する方法を記述するノード記述オブジェクトとして理解できます。
たとえば、tag は要素ノードの名前を表し、text はテキスト ノードのテキストを表し、children は子ノードを表します。 vnode は実際の DOM 要素を表します。すべての実際の DOM ノードは vnode を使用して作成され、ページに挿入されます。

VNodeはDOMを作成し、ビューに挿入します

この図は、vnode を使用して実際の DOM を作成し、それをビューにレンダリングするプロセスを示しています。 vnode と view は 1 対 1 に対応していることがわかります。 vnode は、DOM 要素の JavaScript オブジェクト バージョンと考えることができます。

ビューをレンダリングするプロセスは、最初に vnode を作成し、次に vnode を使用して実際の DOM 要素を生成し、最後にそれをページ レンダリング ビューに挿入することです。

VNodeの役割

ビューがレンダリングされるたびに、まず vnode が作成され、次にそれによって作成された実際の DOM がページに挿入されるため、ビューが最後にレンダリングされたときに作成された vnode を最初にキャッシュできます。その後、ビューを再レンダリングする必要があるときはいつでも、新しく作成された vnode と最後にキャッシュされた vnode を比較して、両者の違いを確認し、違いを見つけて、それに基づいて実際の DOM を変更します。

Vue.js は現在、中粒度の状態検出戦略を使用しています。状態が変化すると、コンポーネント レベルにのみ通知され、コンポーネント内で仮想 DOM を使用してビューがレンダリングされます。

下の図に示すように、状態が変化すると、その状態を使用するコンポーネントにのみ通知されます。つまり、コンポーネントで使用される多くの状態のうちの 1 つが変更される限り、コンポーネント全体を再レンダリングする必要があります。

コンポーネントの 1 つのノードだけが変更された場合、コンポーネント全体のすべてのノードを再レンダリングすると、パフォーマンスが大幅に低下することは明らかです。したがって、vnode キャッシュを起動し、最後のキャッシュと現在作成されている vnode を比較し、異なるノードのみを更新することが重要です。これは vnode の最も重要な機能でもあります。

VNodeの種類

vnode には、次のようなさまざまな種類があります。

コメントノード

1. テキストノード
2. 要素ノード
3. コンポーネントノード
4. 関数ノード
5. クローンノード

前述のように、vnode は JavaScript オブジェクトです。異なるタイプの vnode には、実際には異なるプロパティ、より正確には異なる有効なプロパティがあります。 VNode クラスを使用して vnode を作成し、パラメータを通じてインスタンスの属性を設定すると、無効な属性はデフォルトで undefined または false に設定されるからです。 vnode 上の無効な属性については、無視してください。

1. コメントノード

コメント ノードを作成するプロセスは非常に簡単なので、コードを通じてそのプロパティを直接導入します。

    エクスポートconst createEmptyVNode = text => {
        定数ノード = 新しい VNode()
        ノード.text = テキスト;
        ノードがコメントを返さない
        戻りノード
    }

コメント ノードには、text と isComment という 2 つの有効な属性のみがあります。その他のプロパティはデフォルトで undefined または false になります。

たとえば、実際のコメント ノードには、次のような対応する vnode があります。

// <!-- コメントノード-->
{
    テキスト: "コメントノード",
    コメント: true
}

2. テキストノード

テキスト ノードを作成するプロセスも非常に簡単で、コードは次のとおりです。

    エクスポート関数createTextVNode(val) {
        新しい VNode(undefined, undefined, undefined, String(val)) を返します
    }

テキスト タイプの vnode が作成されると、テキスト属性は 1 つだけになります。

{
    テキスト: 「テキストノード」
}
 

3. ノードのクローン

ノードの複製とは、既存のノードのプロパティを新しいノードに割り当てることです。これにより、新しく作成されたノードと複製されたノードのプロパティが一致し、複製効果が得られます。その機能は、静的ノードとスロット ノードを最適化することです。

静的ノードを例にとると、コンポーネントの状態が変化すると、現在のコンポーネントは仮想 DOM を通じてビューを再レンダリングします。静的ノードのコンテンツは、vnode を取得するためにレンダリング関数を実行する必要がある最初のレンダリングを除いて変更されないため、その後の更新では、vnode を再生成するためにレンダリング関数を実行する必要はありません。

そのため、クローンノードを作成する方法を使用して vnode をクローンし、そのクローンノードを使用してレンダリングを行うことになります。この方法では、静的ノードの新しい vnode を生成するためにレンダリング関数を実行する必要がなくなり、パフォーマンスがある程度向上します。

クローンノードを作成するコードは次のとおりです。

エクスポート関数 cloneVNode(vnode, deep) {
        const クローン = 新しい VNode(vnode.tag、vnode.data、vnode.children、vnode.text、vnode.elm、vnode.context、vnode.componentOptions、vnode.asyncFactory)
        クローン.ns = vnode.ns
        クローンされた.isStatic = vnode.isStatic
        クローンされたキー = vnode.key
        クローンされた.isComment = vnode.isComment
        cloned.isCloned = true
        if (deep && vnode.children) {
            クローンされた子 = cloneVNodes(vnode.children)
        }
        クローンを返す
    }

既存のノードを複製するには、既存のノードのすべてのプロパティを新しいノードに割り当てるだけです。
複製されたノードと複製されたノードの変位の違いは isCloned プロパティです。これは、複製されたノードの場合は true、複製される元のノードの場合は false になります。

4. 要素ノード

要素ノードには通常、次の 4 つの有効な属性があります。

• タグ: タグは、p、ul、li、div などのノードの名前です。
• data: この属性には、属性、クラス、スタイルなど、ノードに関するデータが含まれます。
• children: 現在のノードの子ノードのリスト。
• コンテキスト: 現在のコンポーネントのVue.jsインスタンスです

実際の要素ノードの場合、対応する vnode は次のようになります。

    // <p><span>こんにちは</span><span>世界</span></p>
    {
        子: [VNode, VNode],
        コンテクスト： {...}、
        データ： {...}、
        タグ: "p",
        ...
    }
 

5. コンポーネントノード

コンポーネント ノードは要素ノードに似ており、次の 2 つの固有のプロパティがあります。

componentOptions: コンポーネントノードのオプションパラメータ。propsData、タグ、子などの情報が含まれます。
componentInstance: コンポーネントのインスタンス、つまり Vue.js のインスタンス。実際、Vue.js では、各コンポーネントに Vue.js インスタンスがあります。

コンポーネント ノードの場合、対応する vnode は次のとおりです。

    // <子></子>
    {
        コンポーネントインスタンス: {...},
        コンポーネントオプション: {...},
        コンテクスト： {...}、
        データ： {...}、
        タグ: "vue-component-1-child",
        ...    
    }

6. 機能ノード

機能ノードはコンポーネント ノードに似ています。機能ノードには functionalContext と functionalOptions という 2 つの固有のプロパティがあります。
通常、関数ノードの vnode は次のようになります。

     {
        機能コンテキスト: {...},
        機能オプション: {...},
        コンテクスト： {...}、
        データ： {...}、
        タグ: "div"
      }

要約する

VNode は、さまざまなタイプの vnode インスタンスを生成できるクラスです。さまざまなタイプのインスタンスは、さまざまなタイプの実際の DOM を表します。

Vue.js は仮想 DOM を使用してコンポーネントのビューを更新するため、属性が変更されるとコンポーネント全体を再レンダリングする必要がありますが、コンポーネント内のすべての DOM ノードを更新する必要はありません。そのため、vnode をキャッシュし、新しく生成された vnode とキャッシュされた vnode を比較して、更新が必要な部分に対してのみ DOM 操作を実行すると、パフォーマンスが大幅に向上します。

vnode には多くの種類があり、基本的には Vnode からインスタンス化されたオブジェクトです。それらの唯一の違いはプロパティです。

Vue.js での VNode の使用に関するこの記事はこれで終わりです。VNode の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。