关于vue列表渲染list中key值的作用

vuejs官网对列表渲染维护状态的解释：

当vue正在更新使用v-for渲染的元素列表时，它默认使用‘就地更新’的策略。

如果数据项的顺序被改变，vue不会移动dom元素来匹配数据项的顺序，而是就地更新每个元素，并且确保他们在每个索引位置正确渲染。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时dom状态（例如：表单输入值）的列表渲染输出。

为了给vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每一项提供一个唯一的key，这是vue识别节点的通用机制。

除非遍历输出的dom内容非常简单，或者是刻意依赖默认行为以获取性能上的提升

举个例子：

     data.list = 0;

     settimeout(()=>data.list = 10000,0)

     <li v-for='i in list'>{{i}}</li> // 用时 2-300ms

     <li v-for='i in list' key='i'>{{i}}</li> // 用时 5-800ms

因为不带key时，省去的销毁/创建组件的开销，同时只需修改dom文本内容而不是移除/添加节点。

这就是文档中所说的 ‘刻意依赖默认行为以获取性能上的提升’ ，这种模式只能适用于渲染简单的无状态组件，而大多数的场景，列表组件是都有自己的状态

 

那么key值在组件update时候做了什么？

vue的api文档中解释了key的作用：

key的特殊attribute主要用在vue的虚拟dom算法，在新旧nodes对比时辨识vnodes。

不使用key：update时候，使用最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。

使用key：update时候，会基于key的变化重新排列元素顺序，并且会移除key不存在的元素，也可以用于强制替换元素/组件，而不是重复使用

　　　　  当遇到以下场景会非常有用：1.完整的触发组件的生命周期钩子 2.触发过渡

　　　　  例子： <transition> <span :key="text">{{ text }}</span> </transition>

                 当text发生改变时，span标签总是被替换，而不是被修改，因此会触发过渡

                 再举例：一个分页组件的列表，列表里每一项都包含图片和文字。不带key属性的情况下，切换页面时候，还是显示上一页的图片。

　　　　　　　　   如果列表上带有id唯一的key，每次渲染就会替换所有组件，显示正确的状态

总结： 带上key，虽然update时候增加了开销，但是可以保证组件的状态正确显示

参考 https://www.jianshu.com/p/bf82e99fa0a1 和 vue官网