这篇文章主要介绍了详解为什么Vue中不要用index作为key(diff算法)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。
另外本文的结论对于性能的毁灭
本文来源gao!daima.com搞$代!码#网#
是针对列表子元素顺序会交换、或者子元素被删除的特殊情况，提前说明清楚，喷子绕道。
本篇已经收录在 Github 仓库，欢迎 Star：
https://github.com/sl1673495/blogs/issues/39
示例
以这样一个列表为例：
<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(diff算法)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：详解为什么Vue中不要用index作为key(diff算法)
