六、vue中key值的作用

vue中key值的作用

（1）管理可复用的元素

• vue会复用已有的元素而不是重新开始渲染。比如登录和注册框来回切换，但也存在问题,当切换时用户输入的内容不会改变，因为两个模板使用一样的元素，里面的input标签不会被替换。如下：

  <div id="app">
      <div v-if="loginType === 'username'">
          <label>Username</label>
          <input placeholder="Enter your username">
      </div>
      <div v-else>
          <label>Email</label>
          <input placeholder="Enter your email address" >
      </div>
      <button @click="changeTab">Toggle login type</button>
  </div>
  <script>
      new Vue({
          el: "#app",
          data: {
              loginType: 'username'
          },
          methods: {
              changeTab: function(){
                  if(this.loginType == 'username'){
                      this.loginType = ''
                  }else{
                      this.loginType = 'username'
                  }
              }
          }
      })
  </script>
  

• 当添加了key属性之后，vue可以识别两个元素的不同，再次切换时输入框都被重新渲染。label没有添加key，还可以被复用。如下：

  <div id="app">
      <div v-if="loginType === 'username'">
          <label>Username</label>
          <input placeholder="Enter your username"  key="username-input" >
      </div>
      <div v-else>
          <label>Email</label>
          <input placeholder="Enter your email address"  key="username-email" >
      </div>
      <button @click="changeTab">Toggle login type</button>
  </div>
  <script>
      new Vue({
          el: "#app",
          data: {
              loginType: 'username'
          },
          methods: {
              changeTab: function(){
                  if(this.loginType == 'username'){
                      this.loginType = ''
                  }else{
                      this.loginType = 'username'
                  }
              }
          }
      })
  </script>
  

（2）列表渲染

• 在vue中通过v-for遍历出每一项，再将其渲染出来。由于vue的组件复用策略，在添加与删除某一项时。vue只会添加删除一个元素然后改变每个元素的值，这样虽然很高效。但只适用于不依赖子组件状态或临时 DOM 状态。当每项存在状态时，没有key值的区分vue无法识别出它们，就会出现下面的状况。

  <div id='app'>
      <!--v-for循环普通数组-->
      <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>
      <!--注意：v-for循环的时候，key属性只能使用number或string -->
      <!--注意：key使用的时候，必须使用v-bind绑定属性的形式，指定key的值 -->
      <!-- 在组件中，使用 v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，
       必须在使用v-for的同时，指定唯一的 字符串/数字 类型:key 值-->
      <p v-for="item in list">
       <input type="checkbox"/>
       {{item.id}}--{{item.name}}
      </p>
       
     </div>
     <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>
  

选中第一项，随后添加新的一项

• 此时选中的状态变了，新添加的一项成为被选中的状态了。这就是不加key值的结果，如果给<li>加:key="id"就不会出现上面这种现象了。

• 加了:key="id"后vue得以识别出每一项有哪些不同再次添加新的元素或删除时会移动DOM节点来渲染列表。

• 更详细可以参考：详解key在Vue列表渲染时究竟起到了什么作用