文档中关于key的解释
预期：
number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)
key的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
最常见的用例是结合 v-for：
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
- 完整地触发组件的生命周期钩子
- 触发过渡
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时，<span> 总是会被替换而不是被修改，因此会触发过渡。
如果不加key会发生生么？
<div id="app">
<ul>
<li v-for="(p, index) in list" >
<span>{{p.name}}</span>
<input type="text">
<button @click="handleDelete(index)">删除</button>
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
list: [
{name: '张三', k: 'A'},
{name: '李四', k: 'B'},
{name: '王五', k: 'C'}
]
}
},
methods: {
handleDelete(index) {
this.list.splice(index, 1);
}
}
});
</script>
这里我们并不加key，并在input框中输入对应的值，这些值我们不进行存储。
点击李四这行的删除。
通过结果我们发现，王五旁中的input框中数据为222，并不是333
这里我们需要重新理解VUE文档中的话：如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。
所以其实以上例子是发生了如下变化
如果加了key会发生什么？
总结
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点。减少了对页面的DOM操作。
