vue中key的用途小记

Vue学习小记：
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
1）使用key的原因：用key管理可复用的元素
**Vue会尽可能高效的渲染元素，通常会复用已有元素，但此时会带来一些不好的副作用

2）最常见的用例是结合 v-for：
<ul>
<li v-for=“item in items” :key=“item.id”>…</li> v-bind:key=”item.id”==:key=”item.id”
</ul>

	**使用v-for来遍历一个对象属性 
	**在遍历对象时，会按照Object.keys()的结果遍历，但是不能保证它的结果在不同的js引擎下都能一致

	**当 Vue 正在更新使用 v-for 渲染的元素列表时采用就地更新的策略，如果数据项的顺序被改变，Vue将不会移动DOM元素类匹配数据项的顺序，而是就地地更新每一个元素，并确保他们在每个索引位置正确的渲染
	这个默认模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态的列表渲染


	**建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
	**不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
**完整地触发组件的生命周期钩子
**触发过渡
<transition>（当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。）
<span :key=“text”>{{ text }}</span>
</transition>