六、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值的结果，如果给

  加:key="id"就不会出现上面这种现象了。

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

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