v-forのkey属性の役割

vueでリストレンダリングを行う場合、デフォルトではその場多重化ポリシーに従います.
オンサイト多重化ポリシー:
リストレンダリングを行うと、vueは既存のラベルを直接多重化し、すべてのラベルをすべて再削除して作成することはなく、データのみを再レンダリングし、データがレンダリングされるまで新しい要素を作成します.
 
Vueではv-forのプロパティが提供されています.key:
keyプロパティはv-forレンダリングの効率を向上させるために使用できます!vueは元の要素とデータを変更するのではなく、新しい要素を作成して新しいデータをレンダリングします.
 
v-forを使用する場合、vueには要素にkey属性を追加する必要があります.このkey属性は一意の識別でなければなりません.
keyに付与されたコンテンツは可変ではありません
 
1.v-forを書くときは、要素にkey属性を付ける必要があります.
2.keyの主な役割はレンダリング性能を向上させることです!
3.keyプロパティは、データの混乱を回避します(要素に一時的なデータが含まれている場合は、keyを使用しないとデータの混乱が発生します)
 

  
    
    
    
    
  
  
    

      

        
{{ item.name }} 
      
    
    
    
      const vm = new Vue({
        el: "#app",
        data: {
            teachers: [
              { id: 1, name: "aaa" },
              { id: 2, name: "bbb" },
              { id: 3, name: "ccc" },
              { id: 4, name: "ddd" }
            ]
        }
      });