#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。 vue では、コンポーネント テンプレートにルート要素が 1 つだけ必要なのはなぜですか?以下を見てみましょう。 Vue インスタンスまず、この問題は Vue インスタンスから始める必要があると思います。 Vue インスタンスは一般に次のようになります。唯一の違いは ID 名です。vue のルート タグが 1 つだけである理由: 1. DOM の検索と走査の観点から見ると、ルートが複数ある場合、DOM の検索と走査の効率が非常に低くなります。2. Vue 自体の観点から見ると、コンポーネントに複数のエントリと複数のルートがある場合、ユーザーのコンポーネントをさらに複数のコンポーネントに分割できることを意味し、さらにコンポーネント化すると、コード間の結合度が低下します。
<div></div>
var vm = new Vue({ el: '#app', data: {}, methods: {} ... })
<div></div> <div></div> <div></div>
「仮想 DOM」は、Vue コンポーネント ツリーによって確立された VNode ツリー全体の名前です学習時に言わなければならないことVue 最も重要なことは、2.0 で導入された
Virtual DOM です。仮想 DOM の導入後、仮想 DOM ツリー構造はフレームワーク内で実際の DOM にマッピングされるため、DOM を操作する必要がなくなりました。強制的に。
例を見てみましょう。Vue インスタンスによって引き継がれる DOM 構造が次のようになっているとします:
<div> <h1>My title</h1> <span>Content</span> Other text <!-- annotation text --> </div>
createElement メソッドを通じて対応する仮想 DOM 構造を内部的に生成し、実際の DOM 要素を操作用にマッピングできます。そして実際の HTML にレンダリングします。
、このようなタグは 1 つだけ存在できます。同じことが Vue にも当てはまります。トップレベルのタグを 2 つ与えると、対応する DOM 構造は生成できません。これは、なぜ Vue インスタンスに複数のエントリを指定して 1 つずつ試行できないのかという以前の疑問も説明します。
<div></div> <script> export default { } </script>
このトピックについて話す前に、H5 の新しいタグ タグも ルート要素 div は 1 つしかありませんが、これはなぜですか?
<template></template>
のいくつかの機能を理解する必要があります。Documentation を参照して、内部コンテンツが確実に有効ですがレンダリングされません。 vue-cli は基本的に、webpack 設定を通じて .vue ファイルを一連の js/css ファイルにパッケージ化し、それらをブラウザーによる解釈と実行のために html ファイルに挿入します。パッケージ化されたファイル ディレクトリを見てみましょう: タグ内のコンテンツが、Vue インスタンスが仮想 DOM を形成するために引き継ぐものであることを意味します。 . 内容のその部分です。テンプレート配下に複数の div がある場合、仮想 DOM ツリーを生成できません。
抽象的な質問と回答
実際、この質問は最後まで要約され、次の質問に抽象化することもできます。なぜ抽象化された DOM ツリーには、根が一本?
【おすすめの関連ビデオ チュートリアル:
以上がvue にはルート タグが 1 つしかないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。