网上有很多人讲这块的内容都讲到了虚拟DOM的diff算法，其实不太容易懂，我从知乎上看到一个回答比较好理解，下面分享给大伙。
假设你有三个子组件，每个子组件里面有一个「有状态的」孙子组件。
现在用户点击删除按钮，把第二个子组件删掉了，请问结果是怎样的？
你可能会说，那还用问？当然是 2 消失了。因为 data 里的数组从 [1,2,3] 变成了 [1,3]。
实际上你没有考虑全面：注意看图中的绿色正方形没有被删除。
不信的话访问(https://codesandbox.io/s/vue-template-z5xud?fontsize=14)，按照我的指示操作一下：
首先，在三个 input 里依次输入三角形、正方形和圆形。
然后，点击中间的 delete 按钮，你会看到结果变成了：
令人疑惑的在于原来的第三项「圆形」消失了！「正方形」却被保留下来了！
原因
原因很简单，你认为你删除了2，但Vue会认为你做了两件事：
- 把2变成了3
- 然后把3删除了
Vue 为什么要舍近求远呢？
看看这两个数组：[1,2,3] 和 [1,3]
人类会说，这不就是少了个 2 吗？
但是计算机会怎么对比数组？遍历！
首先对比 1 和 1，发现「1 没变」；然后对比 2 和 3，发现「2 变成了 3」；最后对比 undefined 和 3，发现「3 被删除了」。
所以计算机的结论是：「2 变成了 3」以及「3 被删除了」，有毛病吗？没毛病。
- 既然「1 没变」，那么旧地复用之前的 1 和三角形就好了。
- 既然「2 变成了 3」，那么正方形左边的 2，当然要改成 3。里面的正方形旧地复用（正方形没有被删除）。因为正方形三个字是孙子元素的 data，不受「2 变成 3」的影响，所以可以就地复用。
- 既然「3 被删除了」，之前的「圆形」当然应该被删掉，里面的子元素也要删除。
所以现在看这个结果，是不是很合理：
破解方法
怎么解决这个问题呢？怎么让 Vue 知道我删除的是第二个，不是第三个？
用 id 作为 key 就行了。不信你再看：
现在删除第二个：
你可能会问，凭什么加 key 就 ok 了！点击代码试试吧。https://codesandbox.io/s/vue-template-xmt14?fontsize=14
同样的操作再来一遍
首先，在三个 input 内输入三角形、正方形、圆形：
然后删除中间的正方形：
很好，没有bug。
我们以计算机的角度来思考一下：
原本的数组是 [{ id: 1, value: 1 }, { id: 2, value: 2 }, { id: 3, value: 3 }]
点击删除之后的数组是 [{ id: 1, value: 1 }, { id: 3, value: 3 }]
然后对比一下：（注意我没有说这里是 diff 算法，我也不打算在这里讲 diff 算法）
- 首先发现 id 从 1 2 3 变成了 1 3，说明第二项被删除了
- 然后依次对此 id: 1 的项和 id: 3 的项，发现没变化。
所以计算机得出结论：第二项被删除了。符合人类预期！
为什么不能用 index 作为 key
如果你用 index 作为 key，那么在删除第二项的时候，index 就会从 1 2 3 变成 1 2（而不是 1 3），那么 Vue 依然会认为你删除的是第三项。也就是会遇到上面一样的 bug。
所以，永远不要用 index 作为 key。
永远不要！除非你是大神。能清楚地知道如何解决 index 做 key 带来的 bug。
有人说简单的场景可以用index做key。
问题在于，你如何确保需求会一直保持简单？只要出现了删除一项或新增一项的需求，而且这一项里面含有子组件，上面说的 bug 就有可能出现。
前端的需求变更让你永远无法保证简单。相信我~
閱讀更多 滬漂程序員的生活史 的文章
