Vue中key的作用是什么，如何优化列表渲染性能？

本文共计2513个文字，预计阅读时间需要11分钟。

Vue中key的作用+key的特殊attribute+主要用在于Vue的虚拟DOM算法，在新旧Nodes对比时识别VNodes。如果不使用key，Vue会使用一种最大限度的减少动态元素并尽可能尝试原地修改元素的策略。

Vue中key的作用

key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法，而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。此外有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。

描述

首先是官方文档的描述，当Vue正在更新使用v-for渲染的元素列表时，它默认使用就地更新的策略，如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出，例如表单输入值。