Vue.js での VNode の使用

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue は DOM 要素のスタイルとスタイル変更の例を取得します。
  • DOM 要素を取得して属性を設定するために Vue を実装する 2 つの方法
  • Vue で DOM 要素を操作する 3 つの方法の例
  • Vueの命令とDOM操作の詳細な説明
  • 最初にデータをリクエストし、次にDOM共有をレンダリングするVueの実装
  • Vue がデータを監視して DOM をレンダリングした後に関数を実行する詳細な説明

<<:  Ubuntu16.04はphp5.6ウェブサーバー環境を構築します

>>:  Bash スクリプトでの配列メソッドの作成と使用の概要

推薦する

背景画像の配置におけるbackground-position属性の自己理解

最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...

Rancher で Kubernetes 用の標準化された VMware イメージを構築する方法

Kubernetes を学習するときは、Kubernetes 環境で練習する必要があります。ただし、...

HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...

Vmwareでディスクを追加する方法:ディスクを拡張する

この記事では、ディスクを追加または拡張して、Vmare で有効にする方法について説明します。シナリオ...

MySQLからElasticsearchにデータを同期する方法の詳細な説明

目次1. 同期の原理2. ログスタッシュ入力JDBC 3. go-mysql-elasticsear...

jsを使ってシンプルなディスククロックを実現する

この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...

MySQL 5.7.21 解凍版インストール Navicat データベース操作ツールインストール

MySQL解凍版とNavicatデータベース操作ツールのインストールは、以下のとおりです。 1. M...

MySQLコンテナ間のレプリケーション構成例の詳細な説明

背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...

有名ウェブサイトのロゴにおすすめのフォント40選

世界で最も有名なウェブサイトのロゴデザインにはどんなフォントが使われているかご存知ですか?これらのフ...

フォーム検証機能を実装するためのネイティブ js

目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...

editplus の Zen コーディング例コードの説明

たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...

iFrameは背景を覆うポップアップレイヤーとして使うのに最適です

最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ペー...

MySQL 8の新機能におけるグローバルパラメータの永続性の詳細な説明

目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....

Alpine イメージに Ansible サービスを追加する方法

apk add ansible を使用して、alpine イメージに ansible サービスを追加...

MySQL 整合性制約の定義と例のチュートリアル

目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...