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 ノードを作成する方法を記述するノード記述オブジェクトとして理解できます。 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 には、次のようなさまざまな種類があります。 コメントノード
前述のように、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) } クローンを返す } 既存のノードを複製するには、既存のノードのすべてのプロパティを新しいノードに割り当てるだけです。 4. 要素ノード要素ノードには通常、次の 4 つの有効な属性があります。
実際の要素ノードの場合、対応する vnode は次のようになります。 // <p><span>こんにちは</span><span>世界</span></p> { 子: [VNode, VNode], コンテクスト: {...}、 データ: {...}、 タグ: "p", ... } 5. コンポーネントノードコンポーネント ノードは要素ノードに似ており、次の 2 つの固有のプロパティがあります。 componentOptions: コンポーネントノードのオプションパラメータ。propsData、タグ、子などの情報が含まれます。 コンポーネント ノードの場合、対応する vnode は次のとおりです。 // <子></子> { コンポーネントインスタンス: {...}, コンポーネントオプション: {...}, コンテクスト: {...}、 データ: {...}、 タグ: "vue-component-1-child", ... } 6. 機能ノード機能ノードはコンポーネント ノードに似ています。機能ノードには functionalContext と functionalOptions という 2 つの固有のプロパティがあります。 { 機能コンテキスト: {...}, 機能オプション: {...}, コンテクスト: {...}、 データ: {...}、 タグ: "div" } 要約するVNode は、さまざまなタイプの vnode インスタンスを生成できるクラスです。さまざまなタイプのインスタンスは、さまざまなタイプの実際の DOM を表します。 Vue.js は仮想 DOM を使用してコンポーネントのビューを更新するため、属性が変更されるとコンポーネント全体を再レンダリングする必要がありますが、コンポーネント内のすべての DOM ノードを更新する必要はありません。そのため、vnode をキャッシュし、新しく生成された vnode とキャッシュされた vnode を比較して、更新が必要な部分に対してのみ DOM 操作を実行すると、パフォーマンスが大幅に向上します。 vnode には多くの種類があり、基本的には Vnode からインスタンス化されたオブジェクトです。それらの唯一の違いはプロパティです。 Vue.js での VNode の使用に関するこの記事はこれで終わりです。VNode の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu16.04はphp5.6ウェブサーバー環境を構築します
>>: Bash スクリプトでの配列メソッドの作成と使用の概要
最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...
Kubernetes を学習するときは、Kubernetes 環境で練習する必要があります。ただし、...
1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...
この記事では、ディスクを追加または拡張して、Vmare で有効にする方法について説明します。シナリオ...
目次1. 同期の原理2. ログスタッシュ入力JDBC 3. go-mysql-elasticsear...
この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...
MySQL解凍版とNavicatデータベース操作ツールのインストールは、以下のとおりです。 1. M...
背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...
世界で最も有名なウェブサイトのロゴデザインにはどんなフォントが使われているかご存知ですか?これらのフ...
目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...
たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...
最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ペー...
目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....
apk add ansible を使用して、alpine イメージに ansible サービスを追加...
目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...