第64题：Vue 项目中为什么要在列表组件中写 key，其作用是什么？

[noxussj]

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的

代码展示

不使用key的情况

<div v-for="item in list">{{ item.text }}</div>

key不是唯一值，和不使用key的效果是一致的

<div v-for="(item, index) in list" :key="1"></div>

使用key的情况

<div v-for="(item, index) in list" :key="index"></div>

栗子

没有key的情况diff速度会更快。确实，这种观点并没有错。没有绑定key的情况下，并且在遍历模板简单的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用是就地复用。以下为简单的例子

<script>
export default {
    data() {
        return {
            list: [1, 2, 3, 4, 5]
        };
    }
};
</script>

以上的例子，v-for的内容会生成以下的dom节点数组，我们给每一个节点标记一个身份id（仅供参考）

<div>1</div> // id : A
<div>2</div> // id : B
<div>3</div> // id : C
<div>4</div> // id : D
<div>5</div> // id : E

改变list数据，进行数据位置替换，对比改变后的数据

<script>
export default {
    mounted() {
        this.list = [4, 1, 3, 5, 2];
    }
};
</script>

<!-- 没有key的情况下，节点位置不变，但是节点innerText内容更新了 -->
<div>4</div> // id : A
<div>1</div> // id : B
<div>3</div> // id : C
<div>5</div> // id : D
<div>2</div> // id : E


<!-- 有key的情况，dom节点位置进行了交换，但是内容没有更新 -->
<div>4</div> // id : D
<div>1</div> // id : A
<div>3</div> // id : C
<div>5</div> // id : E
<div>2</div> // id : B

增删list数据

<script>
export default {
    mounted() {
        this.list = [3, 4, 5, 6, 7];
    }
};
</script>

<!-- 没有key的情况下，节点位置不变，但是节点innerText内容更新了 -->
<div>3</div> // id : A
<div>4</div> // id : B
<div>5</div> // id : C
<div>6</div> // id : D
<div>7</div> // id : E


<!-- 有key的情况，节点删除了 A, B 节点，新增了 F, G 节点 -->
<div>3</div> // id : C
<div>4</div> // id : D
<div>5</div> // id : E
<div>6</div> // id : F
<div>7</div> // id : G

从以上来看，不带有key，并且使用简单的模板，基于这个前提下，可以更有效的复用节点，diff速度来看也是不带key更加快速的，因为带key在增删节点上有耗时。这就是vue文档所说的默认模式。但是这个并不是key作用，而是没有key的情况下可以对节点就地复用，提高性能
这种模式会带来一些隐藏的副作用，比如可能不会产生过渡效果，或者在某些节点有绑定数据状态，会出现状态错位。VUE文档也说明了这个默认的模式是高效的，但是只适用于不依赖子组件状态的列表渲染输出

参考资料
第 1 题：写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？