首先按官网介绍的,可以主要用在Vue的虚拟Dom算法,在新旧节点对比时辨识VNodes。使用key时,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。

 

        有相同父元素的子元素必须有独特的key,重复的key会造成渲染错误。

        vue中循环列表时,绑定:key的值往往有两种方式,一是将循环列表的索引值index作为key,而是根据返回数据中的唯一标识作为key。不管以什么方式绑定key,key的值在列表中必须是唯一的,可以使用index的原因是索引值必然是唯一的。、

        以下举例子说明以index或者唯一标识符绑定key的时的执行流程

1 index作为key

1.比如有初始数据如下:

   {id:'001',name:'张三',age:'18'},
    {id:'002',name:'李四',age:'19'},
    {id:'003',name:'王五',age:'20'}

2. 在模板使用v-for循坏该数据。以列表li的形式显示

      <ul>
            <li v-for="(index,item) in data" :key="index">
                {item.name} - {item.age}
                <input type="text">
            </li>
        </ul>

3. 那么vue会根据数据生成虚拟DOM,生成的虚拟DOM形式如下:

        <li key="0">张三 - 18 <input type="text"></li>
        <li key="1">李四 - 19 <input type="text"></li>
        <li key="2">王五 - 20 <input type="text"></li>

4.将虚拟DOM转成真实的DOM

 ---------------------分割:以上是vue从绑定数据且从虚拟DOM转成真实DOM的过程----------------------

5.接下来说明数据发现变化时,key绑定值位index时数据的改变,改变数据如下

             {id:'004',name:'老刘',age:'20'},
             {id:'001',name:'张三',age:'18'},
             {id:'002',name:'李四',age:'19'},
             {id:'003',name:'王五',age:'30'}

6.此时由于数据变化了,那么vue就会重复数据渲染过程,此时根据新数据生成的虚拟DOM如下

            <li key="0">老刘 - 30 <input type="text"></li>
            <li key="1">张三 - 18 <input type="text"></li>
            <li key="2">李四 - 19 <input type="text"></li>
            <li key="3">王五 - 20 <input type="text"></li>

7.将虚拟DOM转成真实DOM

 8.接下来解释为什么会出现以上的情况?

        由于在vue中key时虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DON】与【旧虚拟DON】的差异比较,其中的比较规则如下:

         (1)在旧虚拟DOM中找到了与新虚拟DOM相同的key:

             -  旧虚拟DOM中内容没有变化的时候,则直接使用之前的真实DOM(比如上面的input的内容)

             -  若虚拟DOM中的内容发生变化了,则直接生成新的DOM,随后替换掉页面中之前的真实DOM

        (2)旧虚拟DOM中未找到与新虚拟DOM相同的key

               - 直接创建新的真实DOM,随后渲染到页面上

        (3) 由于以上例子并没有绑定key值,那么每次循环的时候key值都是自上而下从0-n,而自上而下input值没有发生改变,因此直接复用

以上过程可以综合为下图

2  id作为key

        当id作为key时,从数据的绑定到渲染时,步骤基本一致,只不过是当数据发生改变的时候,【旧虚拟DOM】与【新虚拟DOM】之间的对比时由于id的存在,当遇到id相同的值时,则是直接复用,而不断niindex的顺序。基本如下:

3 总结

1. 用index作为key可能引发的问题:

  • 若对数据进行:逆序添加、逆序删除等破坏顺序的操作,会产生没有必要的真实DOM更新==>界面效果没问题,但效率低
  • 如果结构中还包含输入的DOM如input,会产生错误的DOM更新==>界面有问题

2.开发中如何选择key?

  • 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
  • 如果不存在对数据的逆序添加、逆序删除等破快顺序的手段,仅用与渲染列表展示,使用index作为key是没有问题的。
Logo

前往低代码交流专区

更多推荐