掌握 Vue key：剖析其原理及与无 key 的区别

在 Vue 中，key 是一个非常重要的概念，特别是在渲染列表（v-for）时。key 的主要作用是帮助 Vue 高效地渲染、更新和销毁 DOM 元素，以便在数据发生变化时，能最小化重排和重绘，提升性能。

1. 什么是 key？

key 是 Vue 中用来标识每个 DOM 元素或组件实例的唯一标识符。它通常在使用 v-for 指令渲染列表时设置，Vue 依赖它来追踪每个 DOM 元素的位置和身份。通过 key，Vue 可以有效地进行元素的复用和更新。

2. 设置 key 与不设置 key 的区别

a. 不设置 key 时的行为

当你在使用 v-for 渲染列表时，如果没有显式地为每个元素设置 key，Vue 会默认使用 “顺序” 来判断元素的变化。当数据发生变化时，Vue 会根据数据的顺序去进行 DOM 更新，可能导致一些不必要的渲染和 DOM 操作，从而影响性能。

Vue 会对列表中的每个元素进行“重用”操作（比如直接替换），但它无法知道哪些元素已经被删除、哪些被更新，可能会造成一些不必要的重绘，甚至会出现一些 DOM 状态不一致的问题。

<template>
  <ul>
    <li v-for="item in items">{
  
  { item.name }}</li>
  </ul>
</template>

<script>
export def