vue中的列表渲染为什么要加key

vue中的列表渲染为什么要加key

1、原始代码和效果

1.1 给出原始代码

<template>
  <div>
    <button @click="add">添加小猪佩奇</button>
    <ul>
      <li v-for="(p,index) in list" :key="index">{{p.name}}--{{p.age}}
        <input>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      list:[
        {name:"张三",age:19},
        {name:"李四",age:20},
        {name:"王五",age:21}
      ]
    }
  },
  methods: {
    add() {
      let xzpq={name:"小猪佩奇",age:25}
      this.list.unshift(xzpq)
    }
  }
}
</script>

1.2 页面呈现如下图所示

假设我们现在在页面上将左边文字复制到右边输入框，则会出现以下效果

2、如果不加key，则默认为每一行默认index，情况如下

反应到虚拟dom上就是这样的

<ul>
    <li index="0">张三--19  <input></li>
    <li index="1">李四--20  <input></li>
    <li index="2">王五--21  <input></li>
</ul>

这个index实际上是key值，为了展示方便写成了index

在实际dom上key看不见，因为vue帮我们解析完了，但是实际上是存在的

当我们点击添加，在最上面一行添加小猪佩奇的时候，出现如下效果

这是为什么呢？

3、vue中进行列表渲染是如何进行比较的

如图所示，vue会为每次的数据改变生成一个虚拟dom树，新虚拟dom会和旧的虚拟dom进行比较，他们会按照这个关键字进行比较的因此当我的索引一旦发生变化的时候那么数据，比较地次数也会越来越多，最终导致效率降低，并且数据也有可能错乱

总结，因此我们在进行列表渲染地时候，我们需要给出唯一标识符，这样可以提高程序的执行效率