为什么不建议用`index`做`key`？为什么不建议用随机数做`key`？

为什么不建议用index做key？为什么不建议用随机数做key？

<template>
  <div>
    <!-- 用index做key -->
    <div v-for="(item, index) in list" :key="index">{{ item.name }}</div>
    <!-- 
      渲染为
      <div key=0>张三</div>
      <div key=1>李四</div>
      <div key=2>王五</div>
     -->

     <!-- 
      执行list.unshift({ name: '赵六', id: 444 })
      渲染为
      <div key=0>赵六</div>
      <div key=1>张三</div>
      <div key=2>李四</div>
      <div key=3>王五</div>
      虽然达到了渲染目的，但是原有三项也修改了，耗费了性能
      -->


      <!-- 用id做key -->

    <!-- 
      渲染为
      <div key=111>张三</div>
      <div key=222>李四</div>
      <div key=333>王五</div>
     -->

     <!-- 
      执行list.unshift({ name: '赵六', id: 444 })
      渲染为
      <div key=444>赵六</div>
      <div key=111>张三</div>
      <div key=222>李四</div>
      <div key=333>王五</div>
      原有三项不变，只是增加了赵六这个人，这才是最理想的效果
      -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', id: 111 },
        { name: '李四', id: 222 },
        { name: '王五', id: 333 },
      ]
    }
  }
}
</script>

用index和随机数同理，随机数每次都在变，做不到专一性，所以很耗费性能