虚拟DOM中key值的作用
“ 虚拟DOM中的key是用来做什么的，为什么Vue中使用v-for指令渲染长列表是不推荐使用index作为key值？”
01
—
什么是虚拟DOM
虚拟DOM就是一棵以JavaScript对象构建的，用来描述DOM结构的树，是对浏览器真实DOM的抽象。虚拟节点通过对象属性来描述DOM，通过特定的方法，将虚拟节点绘制到真实环境浏览器中。
在Vue中，一个虚拟DOM节点的属性有：
通常，一个虚拟DOM节点对象包含标签类型tag、子元素children、DOM属性（类名、id等）data、对应在DOM中的引用ele、其他属性以及我们在本篇中着重要分析的key。
假设我们有如下HTML结构：
<ul class="list"><li>1<li><li>2<li></ul>
用JavaScript对象描述如下：
{tag: 'ul',data: {class: ['list']},children: [{tag: 'li',data: undefined,children: undefined,text: '1',key: undefined},{tag: 'li',data: undefined,children: undeifned,text: '2',key: undefined}],text: undefined,key: undefined}
02
Vue中虚拟DOM的diff算法
通过对Vue源码的学习，我们知道在Vue中，视图的更新是组件级别的。在实例化一个组件的时候，我们可以传入template或自定义render函数来完成组件视图的构建。对于传入template的这种情况，Vue会对其进行编译，生成AST树，根据AST树来生成render函数，将render函数赋值给vm实例属性_render。从源码中可以看到，在实例化组件渲染watcher的时候，会传入一个updateComponent函数，当依赖发生变化的时候，会重新调用updateComponent函数，生成新的vnode，patch到DOM上。