在vue的v-for中，key为什么不能用index？

写在前面

在前端中，主要涉及的基本上就是 DOM的相关操作 和 JS，我们都知道 DOM 操作是比较耗时的，那么在我们写前端相关代码的时候，如何减少不必要的 DOM 操作便成了前端优化的重要内容。

虚拟DOM(virtual DOM)

在 jQuery 时代，基本上所有的 DOM 相关的操作都是由我们自己编写（当然博主是没有写过 jQuery 滴，可能因为博主太年轻了吧，错过了 jQuery 大法的时代），如何操作 DOM, 操作 DOM 的时机应该如何安排成了决定性能的关键，而到了 Vue、React 这些框架盛行的时代，框架采用数据驱动视图，封装了大量的 DOM 操作细节，使得更多的 DOM 操作细节的优化从开发者自己抉择、控制转移到了框架内部，那么在学会使用框架后，如果想要更加深入学习框架，那就需要搞懂框架封装的底层原理，其中非常核心的一部分就是虚拟DOM(virtual DOM)

什么是虚拟 DOM

简而言之，就是通过 JS 来模拟 DOM 结构，关于纠结以什么 JS 数据结构来模拟 DOM 并没有一套标准，只要能完全覆盖 DOM 的所有结构即可，下面以较为通用的方式演示一下。

通过对 DOM 结构的分析，我们可以用 tag 表示 DOM 节点的类型，props 表示 DOM 节点的所有属性，包括 style、class 等，children 表示子节点（没有子节点则表示内容），这样子我们就把整个 DOM 通过 JS 模拟出来了，然后呢? 然后看看下一章~~~

// DOM
<div class="container">
  <h1 style="color: black;" class="title">HeiHei~~</h1>
  <div class="inner-box">
    <span class="myname">I am Yimwu</span>
  </div>
</div>

// VDOM
let vdom = {
   
  tag: 'div',
  props: {
   
    classname: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14