虚拟DOM中key值的作用

Posted 2021-03-29 皮皮说前端

“ 虚拟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上。