原理
其主要的目的就是优化性能。vue在更新dom时会比较key值相同的元素内容是否发生改变，如果不变则不更新页面，这样可以使得尽可能减少页面的更新，提高性能。假如我渲染3个元素，不设置key值，即默认策略应该是标识为index，即0,1,2。假如我在第一个元素后加一个元素，则实际上原先的bc元素都被改值了，变成了xb。
假如我们在添加元素前把b这个item添加为全局变量，然后按下按钮添加元素，发现其没有被销毁，而是重新渲染了值为x，除了第一个元素其余元素都渲染了一遍。
如果每个item都有一个唯一的key，那么在数据改变时，vue只需要渲染那个新增的item。也就是说，理想情况下，某个元素的key值是不能被改变的，否则其会以更新后key值为1的x来更新原先key值为1的b。详细来说就是，bc被更新成xb，然后添加了一个key值为3的c。除了a，渲染了三个元素。而如果将key值确定，则同一个的key的数据没有进行更新，vue也就不会重新渲染。abc到axbc的过程中，只渲染了x这一个元素，从而提高了性能。
假设我们要在第一个元素后面加一个元素，
写法
假如我list内部有3个元素，其内容也很简单，就叫a,b,c
<script setup>
let list = reactive(['a','b','c'])
function test() {
list.splice(1,0,'x');
}
<script>
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
<button @click="test">test</button>
假如我们不写key，则三者以index标识，即0,1,2。
现在我们要往这个列表里面加一个元素，假设在ab之间加个x
数据变成['a','x','b','c']
可以发现之前存储为全局变量的b现在变成了那个x。
而如果设立了独特的key，则b还是b，只不过是下移了一些。（具体代码不写了，可以自己试试）
结语
原本逻辑很清晰，要说出来还是有些混乱。核心就是: 相同key值的元素如果内容不发生改变，则对应的dom元素不进行更新，从而提高了性能。
所以从原理上来说，如果不对list进行修改，那么不写key其实也没有关系，或者说，只要页面中的list不需要更新（打开这个页面后），有没有这个key应该都是无所谓的。但是如果list需要修改，那还是需要给每个item配置独一无二的key，以提高页面的性能。