在vue中，为什么不能用index作为key？-六虎

“我报名参加金石计划1期应战——瓜分10万奖池，这是我的第2篇文章，点击查看活动概况”

啊？不是吧，在vue中，不能运用index作为key呢？运用index作为key又好了解又方便，为什么不能运用呢？看文章就知道啦~.

一、key的效果是什么？

key的效果众所周知，看一个demo就知道：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <ul id="app">
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    list: [1, 2, 3]
                }
            }
        })
    </script>
</body>

在vue中key可以没有，没有也可以运行并且不会报错，可是建议加上key。

别的，我们有必要知道，vue中key运用的当地——协作v-for运用。key是vue中虚拟dom符号的仅有标识，通过这个key，diff算法能更加准确和方便。不运用key的情况下，因为vue的就地更新会挑选复用节点，之前的状况被保存，可能会产生一系列的bug。别的，key的仅有功可以被map数据结构充分利用，时间复杂度仅为o（1）。

简略来说，key是仅有标识，为了让diff算法更准确的找到需求被对比的两个节点。

二、什么是虚拟DOM？

虚拟DOM结构就是一个目标算了，其间描绘了每一层容器的特征。在beroreCreated执行的时分，DOM树并没有生成。

虚拟DOM光说肯定是不行了解的，那我们就用代码说话：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
        <div id="app">
            <ul>
                <item v-for="(num,index) in list" :key="index":num="num":class=`item${num}`></item>
            </ul>
            <button @click="change">change</button>
        </div>

        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        list: [1, 2, 3]
                    }
                },
                methods: {
                    change() {
                        this.list.reverse()
                    }
                },
        //也可以运用原生JS添加DOM结构，不考虑功用的时分
                components: {
                    item: {
                        props: ['num'],
                        template: `<div>{{num}}</div>`,
                        name: 'child'
                    }
                }
            })
      
            // let ul = document.getElementById('app');
            // for (let i = 1; i <= 3; i++) {
            //  let li = document.createElement('li');
            //  li.innerHTML = i;
            //  ul.appendChild(li);
            // }
        </script>
    </body>

先生成虚拟DOM结构，而不是编译：

vnode = {
  tag: 'ul',
  children: [
     {
      tag: 'li',
        children: [{
          vnode: {
            text: '1'
           }
         }]
        },
     {
      tag: 'li',
        children: [{
          vnode: {
            text: '2'
           }
         }]
     },
     {
      tag: 'li',
        children: [{
          vnode: {
            text: '3'
           }
         }]
     },
   ]
}

再将html编写成真实的DOM结构：

再编译成真实DOM结构
    <li>1</li>
    <li>2</li>
    <li>3</li>

虚拟DOM存在的意义就是，削减真实DOM结构的操作，关于浏览器来说，削减开支，提高功用。

三、什么是diff算法?

只要数据源产生改动，就一定会触发watcher查询者函数（Object。defineProperty（））的回调函数，去驱动视图更新，(加_是为了标明这是vue自带的办法)

回调：

vm._update(vm._render()),
 _render会生成vnode
 _update会拿着vnoe去__patch__去查找不同
 __patch__中发动的就是diff算法

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
  <div id="app">
    <ul>
      <item v-for="(item,index) in list" :key="item.id" :num="item.num" :class=`item${item.num}`></item>
  </ul>
  <button @click="change">change</button>
</div >
  <script>
    new Vue({
      el: '#app',
    data() {
      return {
      list: [1, 2, 3]
     },
    methods: {
      change() {
      this.list.reverse()
     }
     },
    components: {
      item: {
      props: ['num'],
    template: `<div>{{ num }}</div>`,
    name: 'child'
       }
     }
   })
  </script>
</body >

当点击按钮change往后，list回转变为：list:[3,2,1]，diff算法会依据DOM树，从上到下，从左到右判别值是否更新。问题是，为什么diff就知道谁跟谁去进行比对呢？这就是key的效果了，key是仅有标识符，diff算法会依据key去比对。

四、为什么不能用index作为key？

依据前三者的知识基础，我们才华更好地了解，为什么不能用index作为key？这里将通过三个demo来展现：

（1）index不能作为key–情形一

demo1：

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <body>
        <div id="app">
            <ul>
                <item v-for="(num,index) in list" :key="index" :num="num" :class=`item${num}`></item>
            </ul>
            <button @click="change">change</button>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        list: [1, 2, 3]
                    }
                },
                methods: {
                    change() {
                        this.list.reverse()
                    }
                },
                components: {
                    item: {
                        props: ['num'],
                        template: `<div>{{num}}</div>`,
                        name: 'child'
                    }
                }
            })
        </script>
    </body>

demo2：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app">
        <ul>
            <item v-for="(item,index) in list" :key="item.id" :num="item.num" :class=`item${item.num}`></item>
        </ul>
        <button @click="change">change</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    list: [{
                        id: 0,
                        num: 1
                    }, {
                        id: 1,
                        num: 2
                    }, {
                        id: 2,
                        num: 3
                    }]
                }
            },
            methods: {
                change() {
                    this.list.reverse()
                }
            },
            components: {
                item: {
                    props: ['num'],
                    template: `<div>{{num}}</div>`,
                    name: 'child'
                }
            }
        })
    </script>
</body>

demo1与demo2的差异在于，key值不一样，demo1是index作为key，而demo2是list中的id作为key。需求留意的是，当我们点击change按钮往后，留意查询代码是怎样改动的：

demo1点击前后改动：

demo2点击前后改动：

表面上，demo1仅仅调换了item1和item3的方位，点击后也是就改动了item1和item3；而demo2三个都改动了。这时有人就会觉得运用index作为key改动DOM结构还更小，岂不是更好？

实际上，眼见不一定为实。我们看看真实的姿态：

demo1的改动前后对比：

demo2改动前后对比：

是不是震动了！！！demo2的list实际上的key和num一一对应着，并没有改动，仅仅次序不一样了。而demo1还改动了两个值。所以，这就是不能运用index作为key的原因之一了。

运用index作为key，会导致diff中的优化失效（降低了复用性，违反了虚拟DOM的初衷）。本来可以复用的东西，不能被复用，徒然添加了功用开支，浪费功用

（2）index不能作为key—情形二

接下来看看demo3，demo3将会淋漓尽致的展现index作为key的bug：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <body>
        <div id="app">
            <ul>
                <item v-for="(item,index) in student" :key="index"></item>
         //<item v-for="(item,index) in list" :key="item.id"></item>
            </ul>
      
            <button @click="change">change</button>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        list: [{
                            id: 0,
                            num: 1
                        }, {
                            id: 1,
                            num: 2
                        }, {
                            id: 2,
                            num: 3
                        }],
                        student: [1, 2, 3]
                    }
                },
                methods: {
          //删去数据
                    change() {
                        this.student.splice(0, 1)
            //this.list.splice(0, 1)
                    }
                },
                components: {
                    item: {
                        template: `<div>{{Math.random()}}</div>`,
                    }
                }
            })
        </script>
    </body>

当删去的时分，又会产生什么意想不到工作呢？

右图是删去之后的效果，惊讶的发现，我们删去的分明是第一个数据，而页面展现是删去了第三个数据。小小的脑袋真的会有大大的疑问。可是通过虚拟DOM，你就会茅塞顿开了。

当用index作为key时，因为diff算法会就地更新，会复用key:0的这个节点，比对的时分，key:0的节点存在，则比对key:1，也存在，而多出了key:2,则会将其删去。

运用index作为key时，在删去数据时，因为vue不会深化区域对比子组件的文本内容，所以会过错移除VDOM中的节点（index的值是不固定的）。

这个比如，文本内容运用的是随机数，所以数据对不上不用太在意。别的，已然index的值不固定，不能作为key，那么扩展一下，可不可以运用随机数作为key呢？答案自然是不可以。因为key值无论是删去还是回转，根本就不能找到相同的key，diff算法就毫无意义了，压根没有复用性可言。

在这个demo3里，数据源放了list这个数据，可言检验循环它，来对比index作为key的效果，将会更加明显哦。

在vue中，为什么不能用index作为key？

一、key的效果是什么？

二、什么是虚拟DOM？

三、什么是diff算法?

四、为什么不能用index作为key？

（1）index不能作为key–情形一

（2）index不能作为key—情形二

相关文章

KubeVela 1.5：灵活框选 CNCF 原子能力打造独特的企业应用发布平台

循序渐进的讲解用Android Jetpack Compose 写一个B站“一键三连”按钮动画, 愿新的一年好运连连

【汇编实战开发笔记】一段汇编代码如何“反编译”成C代码？

和 chatgpt 聊了一会儿分布式锁 redis/zookeeper distributed lock

作者信息