为什么 Vue 中不要用 index 作为 key？
Posted 小生方勤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么 Vue 中不要用 index 作为 key？相关的知识，希望对你有一定的参考价值。
前言
Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。
示例
以这样一个列表为例：
<ul>
<li>1</li>
<li>2</li>
</ul>
那么它的 vnode 也就是虚拟 dom 节点大概是这样的。
{
tag: 'ul',
children: [
{ tag: 'li', children: [ { vnode: { text: '1' }}] },
{ tag: 'li', children: [ { vnode: { text: '2' }}] },
]
}
假设更新以后，我们把子节点的顺序调换了一下：
{
tag: 'ul',
children: [
+ { tag: 'li', children: [ { vnode: { text: '2' }}] },
+ { tag: 'li', children: [ { vnode: { text: '1' }}] },
]
}
很显然，这里的 children 部分是我们本文 diff 算法要讲的重点（敲黑板）。
首先响应式数据更新后，触发了 渲染 Watcher 的回调函数 vm._update(vm._render())去驱动视图更新，
vm._render() 其实生成的就是 vnode，而 vm._update 就会带着新的 vnode 去走触发 __patch__ 过程。
我们直接进入 ul 这个 vnode 的 patch 过程。
对比新旧节点是否是相同类型的节点：
1. 不是相同节点：
isSameNode为false的话，直接销毁旧的 vnode，渲染新的 vnode。这也解释了为什么 diff 是同层对比。
2. 是相同节点，要尽可能的做节点的复用（都是 ul，进入
以上是关于为什么 Vue 中不要用 index 作为 key？的主要内容，如果未能解决你的问题，请参考以下文章
*vue v-for中 key 值的作用—key不能用index的值*