JavaScript - vue 2.0 :key の役割

Question

<p v-for="アイテム内のアイテム" :key="item.id">
<!-- コンテンツ -->
</p>

この :key の使い方を例を挙げて教えていただけますか? :key="value" 値は任意に書き込まれていますか？

Answer 1

key の特別な属性は主に、古いノードと新しいノードを比較するときに VNode を識別するために Vue の仮想 DOM アルゴリズムで使用されます。キーが使用されていない場合、Vue は動的要素を最小限に抑えるアルゴリズムを使用し、可能な限り同じタイプの要素を修復/再利用しようとします。キーを使用すると、キーの変更に基づいて要素の順序が並べ替えられ、キーが存在しない要素が削除されます。

同じ親要素を持つ子要素には、一意のキーが必要です。キーが重複するとレンダリング エラーが発生します。

最も一般的な使用例は、v-for との組み合わせです:

リーリー

要素/コンポーネントを再利用する代わりに強制的に置換するために使用することもできます。次のようなシナリオに遭遇した場合に役立つ可能性があります:

コンポーネントのライフサイクルフックを完全にトリガーする
トランジションをトリガーする

リーリー

テキストが変更されると、いつでも <span> が更新され、遷移がトリガーされます。

出典参照: https://cn.vuejs.org/v2/api/#key

Answer 2

リストをレンダリングするとき、このキーは一意の識別子であるため、一意である必要がある場合があります

。

Answer 3

リストデータを更新するときにキーはここにありますか? 最初のポイント: 同じデータでデータが更新された場合、キーは直接レンダリングに使用されます。同じデータが存在しない場合は、キーが比較されます。そうでない場合、Vue はインプレース原則を使用して既存のデータをレンダリングに直接使用します。その結果、データは期待どおりの効果を達成できません。 dom スタイルとコンポーネントは更新できないのですか?私の理解が正しいかわかりませんが、公式Webサイトには入力にはキーが必要であると記載されていますが、キーがあってもなくても効果は同じであることがわかりました。誰か例を教えてください。とても感謝しています！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！ ！

Answer 4

上で述べたことは公式すぎますが、俗に言うと、サイクルのパフォーマンスを向上させるための方が理解しやすいです。

実際、これを書いても書かなくても問題はありませんが、間違ってもエラーは報告されません。しかし、一般的には for ループを書いた方が良いでしょう。

Answer 5

さらにドキュメントを読むことをお勧めします:
http://cn.vuejs.org/v2/guide/...