Vueのリストレンダリングの詳細な説明

1. v-for: 配列の内容を走査する（よく使われる）

inはofに置き換えることもできる

<本文>
	<div id="div1">
		<li v-for='(p,i) 人' :key=i>
			{{p.name}}--{{p.age}}
			<!-- 張--18
				 リー--19
				 劉--17 -->
		</li>
	</div>
</本文>
<script type="text/javascript">
	Vue.config.productionTps = false です
 	新しいVue({
		el:"#div1",
		データ：{
			人数:
				{id:'001',name:"张",age:18},
				{id:'002',name:"李",age:19},
				{id:'002',名前:"劉",年齢:17},
			]
		}
	})
</スクリプト>

2. v-for: オブジェクトのプロパティをトラバースする（よく使われる）

<本文>
	<div id="div1">
		<li v-for='(p,k) 人' :key=k>
			{{p}}--{{i}}
			<!-- 張--名前
				 18歳 -->
		</li>
	</div>
</本文>
<script type="text/javascript">
	Vue.config.productionTps = false です
 	新しいVue({
		el:"#div1",
		データ：{
			人数:
				名前:"张",
				年齢:18
			}
		}
	})

3. 文字列のトラバース（一般的ではない）

<本文>
	<div id="div1">
		<li v-for='(p,i) in str' :key=i>
			{{p}}--{{i}}
			<!-- a--0 
				 b--1
				 c--2
				 d--3
				 e--4 -->
		</li>
	</div>
</本文>
<script type="text/javascript">
	Vue.config.productionTps = false です
 	新しいVue({
		el:"#div1",
		データ：{
			文字列:"abcde"
		}
	})
</スクリプト>

4. 指定された回数だけトラバースする（あまり使用されない）

<本文>
	<div id="div1">
		<li v-for='(p,i) 5' :key=i>
			{{p}}--{{i}}
			<!-- 1--0
				 2--1
				 3--2
				 4--3
				 5--4 -->
		</li>
	</div>
</本文>

5. キーの機能と原理

上記ではインデックスをキーとして使用していますが、DOM を乱れた順序で変更したり、入力コンテンツがある場合にはエラーが発生します。インデックスは、ページを変更せずにページをレンダリングする場合にのみキーとして使用できます。

ID、携帯電話番号、メールアドレスなどのデータの一意の識別子をキーとして使用することを強くお勧めします。

1. 仮想DOMにおけるキーの役割:

key は仮想 DOM オブジェクトの識別子です。データが変更されると、Vue は新しいデータに基づいて新しい仮想 DOM を生成します。次に、Vue は新しい仮想 DOM と古い仮想 DOM の違いを比較します。比較ルールは次のとおりです。

2. 比較ルール:

（１）新しい仮想DOMと同じキーが古い仮想DOMに見つかります。

①. 仮想DOMの内容が変更されていない場合は、以前の実DOMをそのまま使用します。

②. 仮想DOMの内容が変更されると、新しい実DOMが生成され、ページ内の以前の実DOMが置き換えられます。

（２）新しい仮想DOMと同じキーが古い仮想DOM内に見つからない場合は、新しい実DOMが作成され、ページにレンダリングされます。

3. インデックスをキーとして使用する場合に発生する可能性のある問題:

1. データが逆の順序で追加または削除され、順序が崩れた場合:

不要な実際の DOM 更新が生成されます ==> インターフェース効果は良好ですが、効率は低くなります。

2. 構造に入力クラスの DOM も含まれている場合:

間違った DOM 更新が発生します ==> インターフェイスに問題があります。

4. 開発中にキーを選択するにはどうすればいいですか?

1. ID、携帯電話番号、ID番号、学生番号、その他の一意の値など、各データの一意の識別子をキーとして使用するのが最適です。

2. 逆順でデータを追加または削除するなど、順序を破壊する操作がなく、リストが表示用にのみレンダリングされる場合は、インデックスをキーとして使用しても問題ありません。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。