请说明Vue key的作用及原理 ？
在 Vue.js 中，key 属性的主要作用是用来追踪每个节点的身份，从而重用和重新排序现有元素。你会在 Vue.js 的列表渲染中看到 key 的使用。
在 Vue.js 进行 DOM 更新时，它默认使用 “就地复用” 策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处的每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
当 Vue 更新元素列表时，它使用 “就地更新策略”，意味着如果列表顺序被改变，Vue 不会移动 DOM 元素以匹配数据项的顺序，而是会就地更新每个元素，并确保它在特定索引下渲染过的每个元素。
然而，这种默认的模式在某些场景下并不适用。例如，当运行过渡动画，或者列表中包含输入框元素，用户在输入过程中可能希望保留正在编辑的输入状态。为了在这些情况下给 Vue 一个提示，以便它能够跟踪每个节点的身份，从而重新使用和重新排序现有元素，我们需要给每项元素提供一个唯一 key 属性。
例如：
<div v-for="(item, index) in items" :key="item.id">
<!-- content -->
</div>
在这个例子中，每个循环项都有一个唯一的 id 作为 key。如果 items 数组顺序发生改变，Vue 会根据 key 的值，重新排序元素顺序，而不是移除旧元素，创建新元素。这样可以提高性能，还能保证例如输入框的输入状态等不丢失。
总的来说，key 的作用就是让 Vue 能够跟踪每个节点的身份，在新旧 nodes 对比时，能够更准确、更快的找到对应的节点，从而减少不必要的节点更新操作，提高性能。