Vue中的v-for循环key属性注意事项小结

ゞ浴缸里的玫瑰 2023-05-22 04:37 2阅读 0赞

**当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。  
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。**

*  **key的主要作用就是用来提高渲染性能的！**
 *  **key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）**

在下面这个例子中，如果不给 p 元素绑定key，我先选中第一个，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]  
然后输入ID和Name，点击添加按钮之后，就会出现如下这种情况，刚添加的元素被选中。如果绑定了key属性，则不会出现这种情况。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]

<html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     </head>
    <body>
     <div id='app'>
      
      <div>
       <label>ID:<input type="text" v-model="id"></label>
       <label>Name:<input type="text" v-model="name"></label>
       <input type="button" value="添加" @click="add" />
      </div>
      
      
      
      <p v-for="item in list" :key="item.id">
       <input type="checkbox"/>
       { { item.id}}--{ { item.name}}
      </p>
      
     </div>
    </body>
    <script src="vue.min.js"></script>
    <script>
     var vm = new Vue({ 
      el:'#app',
      data:{ 
       id:"",
       name:"",
       list:[
        { id:1, name:'李斯'},
        { id:2, name:'嬴政'},
        { id:3, name:'赵高'},
        { id:4, name:'韩非'},
        { id:5, name:'荀子'},
       ],
      },
      methods:{ 
       add(){ 
        this.list.unshift({ id:this.id,name:this.name});
       }
      }
     });
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]: /images/20230521/c0e445492ed94927afb1212f32cc35af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]: /images/20230521/f78a665a12d744f79e909ba67f573d8b.png