Vue实现virtual-dom的原理简析
virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现,virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题,vdom很好的将dom做了一层映射关系,进而将在我们本需要直接进行dom的一系列操作,映射到了操作vdom,而vdom上定义了关于真实dom的一些关键的信息,vdom完全是用js去实现,和宿主浏览器没有任何联系,此外得益于js的执行速度,将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复杂的dom操作全部放到vdom中进行,这样就通过操作vdom来提高直接操作的dom的效率和性能。
vue在2.0版本也引入了vdom。其vdom算法是基于所做的修改。
在vue的整个应用生命周期当中,每次需要更新视图的时候便会使用vdom。那么在vue当中,vdom是如何和vue这个框架融合在一起工作的呢?以及大家常常提到的vdom的diff算法又是怎样的呢?接下来就通过这篇文章简单的向大家介绍下vue当中的vdom是如何去工作的。
首先,我们还是来看下vue生命周期当中初始化的最后阶段:将vm实例挂载到dom上,源码在src/core/instance
vue.prototype._init = function () { ... vm.$mount(vm.$options.el) // 实际上是调用了mountcomponent方法 ... }
mountcomponent函数的定义是:
export function mountcomponent ( vm: component, el: ?element, hydrating?: boolean ): component { // vm.$el为真实的node vm.$el = el // 如果vm上没有挂载render函数 if (!vm.$options.render) { // 空节点 vm.$options.render = createemptyvnode } // 钩子函数 callhook(vm, 'beforemount') let updatecomponent /* istanbul ignore if */ if (process.env.node_env !== 'production' && config.performance && mark) { ... } else { // updatecomponent为监听函数, new watcher(vm, updatecomponent, noop) updatecomponent = () => { // vue.prototype._render 渲染函数 // vm._render() 返回一个vnode // 更新dom // vm._render()调用render函数,会返回一个vnode,在生成vnode的过程中,会动态计算getter,同时推入到dep里面 vm._update(vm._render(), hydrating) } } // 新建一个_watcher对象 // vm实例上挂载的_watcher主要是为了更新dom // vm/expression/cb vm._watcher = new watcher(vm, updatecomponent, noop) hydrating = false // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook if (vm.$vnode == null) { vm._ismounted = true callhook(vm, 'mounted') } return vm }
注意上面的代码中定义了一个updatecomponent函数,这个函数执行的时候内部会调用vm._update(vm._render(), hyddrating)方法,其中vm._render方法会返回一个新的vnode,(关于vm_render是如何生成vnode的建议大家看看vue的关于compile阶段的代码),然后传入vm._update方法后,就用这个新的vnode和老的vnode进行diff,最后完成dom的更新工作。那么updatecomponent都是在什么时候去进行调用呢?
vm._watcher = new watcher(vm, updatecomponent, noop)
实例化一个watcher,在求值的过程中this.value = this.lazy ? undefined : this.get(),会调用this.get()方法,因此在实例化的过程当中dep.target会被设为这个watcher,通过调用vm._render()方法生成新的vnode并进行diff的过程中完成了模板当中变量依赖收集工作。即这个watcher被添加到了在模板当中所绑定变量的依赖当中。一旦model中的响应式的数据发生了变化,这些响应式的数据所维护的dep数组便会调用dep.notify()方法完成所有依赖遍历执行的工作,这里面就包括了视图的更新即updatecomponent方法的调用。
updatecomponent方法的定义是:
updatecomponent = () => { vm._update(vm._render(), hydrating) }
完成视图的更新工作事实上就是调用了vm._update方法,这个方法接收的第一个参数是刚生成的vnode,调用的vm._update方法的定义是
vue.prototype._update = function (vnode: vnode, hydrating?: boolean) { const vm: component = this if (vm._ismounted) { callhook(vm, 'beforeupdate') } const prevel = vm.$el const prevvnode = vm._vnode const prevactiveinstance = activeinstance activeinstance = vm // 新的vnode vm._vnode = vnode // vue.prototype.__patch__ is injected in entry points // based on the rendering backend used. // 如果需要diff的prevvnode不存在,那么就用新的vnode创建一个真实dom节点 if (!prevvnode) { // initial render // 第一个参数为真实的node节点 vm.$el = vm.__patch__( vm.$el, vnode, hydrating, false /* removeonly */, vm.$options._parentelm, vm.$options._refelm ) } else { // updates // 如果需要diff的prevvnode存在,那么首先对prevvnode和vnode进行diff,并将需要的更新的dom操作已patch的形式打到prevvnode上,并完成真实dom的更新工作 vm.$el = vm.__patch__(prevvnode, vnode) } activeinstance = prevactiveinstance // update __vue__ reference if (prevel) { prevel.__vue__ = null } if (vm.$el) { vm.$el.__vue__ = vm } // if parent is an hoc, update its $el as well if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) { vm.$parent.$el = vm.$el } }
在这个方法当中最为关键的就是vm.__patch__方法,这也是整个virtaul-dom当中最为核心的方法,主要完成了prevvnode和vnode的diff过程并根据需要操作的vdom节点打patch,最后生成新的真实dom节点并完成视图的更新工作。
接下来就让我们看下vm.__patch__里面到底发生了什么:
function patch (oldvnode, vnode, hydrating, removeonly, parentelm, refelm) { // 当oldvnode不存在时 if (isundef(oldvnode)) { // 创建新的节点 createelm(vnode, insertedvnodequeue, parentelm, refelm) } else { const isrealelement = isdef(oldvnode.nodetype) if (!isrealelement && samevnode(oldvnode, vnode)) { // patch existing root node // 对oldvnode和vnode进行diff,并对oldvnode打patch patchvnode(oldvnode, vnode, insertedvnodequeue, removeonly) } } }
在对oldvnode和vnode类型判断中有个samevnode方法,这个方法决定了是否需要对oldvnode和vnode进行diff及patch的过程。
function samevnode (a, b) { return ( a.key === b.key && a.tag === b.tag && a.iscomment === b.iscomment && isdef(a.data) === isdef(b.data) && sameinputtype(a, b) ) }
samevnode会对传入的2个vnode进行基本属性的比较,只有当基本属性相同的情况下才认为这个2个vnode只是局部发生了更新,然后才会对这2个vnode进行diff,如果2个vnode的基本属性存在不一致的情况,那么就会直接跳过diff的过程,进而依据vnode新建一个真实的dom,同时删除老的dom节点。
vnode基本属性的定义可以参见源码:src/vdom/vnode.js里面对于vnode的定义。
constructor ( tag?: string, data?: vnodedata, // 关于这个节点的data值,包括attrs,style,hook等 children?: ?array<vnode>, // 子vdom节点 text?: string, // 文本内容 elm?: node, // 真实的dom节点 context?: component, // 创建这个vdom的上下文 componentoptions?: vnodecomponentoptions ) { this.tag = tag this.data = data this.children = children this.text = text this.elm = elm this.ns = undefined this.context = context this.functionalcontext = undefined this.key = data && data.key this.componentoptions = componentoptions this.componentinstance = undefined this.parent = undefined this.raw = false this.isstatic = false this.isrootinsert = true this.iscomment = false this.iscloned = false this.isonce = false } // deprecated: alias for componentinstance for backwards compat. /* istanbul ignore next */ get child (): component | void { return this.componentinstance } }
每一个vnode都映射到一个真实的dom节点上。其中几个比较重要的属性:
- tag 属性即这个vnode的标签属性
- data 属性包含了最后渲染成真实dom节点后,节点上的class,attribute,style以及绑定的事件
- children 属性是vnode的子节点
- text 属性是文本属性
- elm 属性为这个vnode对应的真实dom节点
- key 属性是vnode的标记,在diff过程中可以提高diff的效率,后文有讲解
比如,我定义了一个vnode,它的数据结构是:
{ tag: 'div' data: { id: 'app', class: 'page-box' }, children: [ { tag: 'p', text: 'this is demo' } ] }
最后渲染出的实际的dom结构就是:
<div id="app" class="page-box"> <p>this is demo</p> </div>
让我们再回到patch函数当中,在当oldvnode不存在的时候,这个时候是root节点初始化的过程,因此调用了createelm(vnode, insertedvnodequeue, parentelm, refelm)方法去创建一个新的节点。而当oldvnode是vnode且samevnode(oldvnode, vnode)2个节点的基本属性相同,那么就进入了2个节点的diff过程。
diff的过程主要是通过调用patchvnode方法进行的:
function patchvnode(oldvnode, vnode, insertedvnodequeue, removeonly) { ... }
if (isdef(data) && ispatchable(vnode)) { // cbs保存了hooks钩子函数: 'create', 'activate', 'update', 'remove', 'destroy' // 取出cbs保存的update钩子函数,依次调用,更新attrs/style/class/events/directives/refs等属性 for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldvnode, vnode) if (isdef(i = data.hook) && isdef(i = i.update)) i(oldvnode, vnode) }
更新真实dom节点的data属性,相当于对dom节点进行了预处理的操作
接下来:
... const elm = vnode.elm = oldvnode.elm const oldch = oldvnode.children const ch = vnode.children // 如果vnode没有文本节点 if (isundef(vnode.text)) { // 如果oldvnode的children属性存在且vnode的属性也存在 if (isdef(oldch) && isdef(ch)) { // updatechildren,对子节点进行diff if (oldch !== ch) updatechildren(elm, oldch, ch, insertedvnodequeue, removeonly) } else if (isdef(ch)) { // 如果oldvnode的text存在,那么首先清空text的内容 if (isdef(oldvnode.text)) nodeops.settextcontent(elm, '') // 然后将vnode的children添加进去 addvnodes(elm, null, ch, 0, ch.length - 1, insertedvnodequeue) } else if (isdef(oldch)) { // 删除elm下的oldchildren removevnodes(elm, oldch, 0, oldch.length - 1) } else if (isdef(oldvnode.text)) { // oldvnode有子节点,而vnode没有,那么就清空这个节点 nodeops.settextcontent(elm, '') } } else if (oldvnode.text !== vnode.text) { // 如果oldvnode和vnode文本属性不同,那么直接更新真是dom节点的文本元素 nodeops.settextcontent(elm, vnode.text) }
这其中的diff过程中又分了好几种情况,oldch为oldvnode的子节点,ch为vnode的子节点:
- 首先进行文本节点的判断,若oldvnode.text !== vnode.text,那么就会直接进行文本节点的替换;
- 在vnode没有文本节点的情况下,进入子节点的diff;
- 当oldch和ch都存在且不相同的情况下,调用updatechildren对子节点进行diff;
- 若oldch不存在,ch存在,首先清空oldvnode的文本节点,同时调用addvnodes方法将ch添加到elm真实dom节点当中;
- 若oldch存在,ch不存在,则删除elm真实节点下的oldch子节点;
- 若oldvnode有文本节点,而vnode没有,那么就清空这个文本节点。
这里着重分析下updatechildren方法,它也是整个diff过程中最重要的环节:
function updatechildren (parentelm, oldch, newch, insertedvnodequeue, removeonly) { // 为oldch和newch分别建立索引,为之后遍历的依据 let oldstartidx = 0 let newstartidx = 0 let oldendidx = oldch.length - 1 let oldstartvnode = oldch[0] let oldendvnode = oldch[oldendidx] let newendidx = newch.length - 1 let newstartvnode = newch[0] let newendvnode = newch[newendidx] let oldkeytoidx, idxinold, elmtomove, refelm // 直到oldch或者newch被遍历完后跳出循环 while (oldstartidx <= oldendidx && newstartidx <= newendidx) { if (isundef(oldstartvnode)) { oldstartvnode = oldch[++oldstartidx] // vnode has been moved left } else if (isundef(oldendvnode)) { oldendvnode = oldch[--oldendidx] } else if (samevnode(oldstartvnode, newstartvnode)) { patchvnode(oldstartvnode, newstartvnode, insertedvnodequeue) oldstartvnode = oldch[++oldstartidx] newstartvnode = newch[++newstartidx] } else if (samevnode(oldendvnode, newendvnode)) { patchvnode(oldendvnode, newendvnode, insertedvnodequeue) oldendvnode = oldch[--oldendidx] newendvnode = newch[--newendidx] } else if (samevnode(oldstartvnode, newendvnode)) { // vnode moved right patchvnode(oldstartvnode, newendvnode, insertedvnodequeue) canmove && nodeops.insertbefore(parentelm, oldstartvnode.elm, nodeops.nextsibling(oldendvnode.elm)) oldstartvnode = oldch[++oldstartidx] newendvnode = newch[--newendidx] } else if (samevnode(oldendvnode, newstartvnode)) { // vnode moved left patchvnode(oldendvnode, newstartvnode, insertedvnodequeue) // 插入到老的开始节点的前面 canmove && nodeops.insertbefore(parentelm, oldendvnode.elm, oldstartvnode.elm) oldendvnode = oldch[--oldendidx] newstartvnode = newch[++newstartidx] } else { // 如果以上条件都不满足,那么这个时候开始比较key值,首先建立key和index索引的对应关系 if (isundef(oldkeytoidx)) oldkeytoidx = createkeytooldidx(oldch, oldstartidx, oldendidx) idxinold = isdef(newstartvnode.key) ? oldkeytoidx[newstartvnode.key] : null // 如果idxinold不存在 // 1. newstartvnode上存在这个key,但是oldkeytoidx中不存在 // 2. newstartvnode上并没有设置key属性 if (isundef(idxinold)) { // new element // 创建新的dom节点 // 插入到oldstartvnode.elm前面 // 参见createelm方法 createelm(newstartvnode, insertedvnodequeue, parentelm, oldstartvnode.elm) newstartvnode = newch[++newstartidx] } else { elmtomove = oldch[idxinold] /* istanbul ignore if */ if (process.env.node_env !== 'production' && !elmtomove) { warn( 'it seems there are duplicate keys that is causing an update error. ' + 'make sure each v-for item has a unique key.' ) // 将找到的key一致的oldvnode再和newstartvnode进行diff if (samevnode(elmtomove, newstartvnode)) { patchvnode(elmtomove, newstartvnode, insertedvnodequeue) oldch[idxinold] = undefined // 移动node节点 canmove && nodeops.insertbefore(parentelm, newstartvnode.elm, oldstartvnode.elm) newstartvnode = newch[++newstartidx] } else { // same key but different element. treat as new element // 创建新的dom节点 createelm(newstartvnode, insertedvnodequeue, parentelm, oldstartvnode.elm) newstartvnode = newch[++newstartidx] } } } } // 如果最后遍历的oldstartidx大于oldendidx的话 if (oldstartidx > oldendidx) { // 如果是老的vdom先被遍历完 refelm = isundef(newch[newendidx + 1]) ? null : newch[newendidx + 1].elm // 添加newvnode中剩余的节点到parentelm中 addvnodes(parentelm, refelm, newch, newstartidx, newendidx, insertedvnodequeue) } else if (newstartidx > newendidx) { // 如果是新的vdom先被遍历完,则删除oldvnode里面所有的节点 // 删除剩余的节点 removevnodes(parentelm, oldch, oldstartidx, oldendidx) } }
在开始遍历diff前,首先给oldch和newch分别分配一个startindex和endindex来作为遍历的索引,当oldch或者newch遍历完后(遍历完的条件就是oldch或者newch的startindex >= endindex),就停止oldch和newch的diff过程。接下来通过实例来看下整个diff的过程(节点属性中不带key的情况):
首先从第一个节点开始比较,不管是oldch还是newch的起始或者终止节点都不存在samevnode,同时节点属性中是不带key标记的,因此第一轮的diff完后,newch的startvnode被添加到oldstartvnode的前面,同时newstartindex前移一位;
第二轮的diff中,满足samevnode(oldstartvnode, newstartvnode),因此对这2个vnode进行diff,最后将patch打到oldstartvnode上,同时oldstartvnode和newstartindex都向前移动一位
第三轮的diff中,满足samevnode(oldendvnode, newstartvnode),那么首先对oldendvnode和newstartvnode进行diff,并对oldendvnode进行patch,并完成oldendvnode移位的操作,最后newstartindex前移一位,oldstartvnode后移一位;
第四轮的diff中,过程同步骤3;
第五轮的diff中,同过程1;
遍历的过程结束后,newstartidx > newendidx,说明此时oldch存在多余的节点,那么最后就需要将这些多余的节点删除。
在vnode不带key的情况下,每一轮的diff过程当中都是起始和结束节点进行比较,直到oldch或者newch被遍历完。而当为vnode引入key属性后,在每一轮的diff过程中,当起始和结束节点都没有找到samevnode时,首先对oldch中进行key值与索引的映射:
if (isundef(oldkeytoidx)) oldkeytoidx = createkeytooldidx(oldch, oldstartidx, oldendidx) idxinold = isdef(newstartvnode.key) ? oldkeytoidx[newstartvnode.key] : null
createkeytooldidx方法,用以将oldch中的key属性作为键,而对应的节点的索引作为值。然后再判断在newstartvnode的属性中是否有key,且是否在oldkeytoindx中找到对应的节点。
如果不存在这个key,那么就将这个newstartvnode作为新的节点创建且插入到原有的root的子节点中:
if (isundef(idxinold)) { // new element // 创建新的dom节点 // 插入到oldstartvnode.elm前面 // 参见createelm方法 createelm(newstartvnode, insertedvnodequeue, parentelm, oldstartvnode.elm) newstartvnode = newch[++newstartidx] }
如果存在这个key,那么就取出oldch中的存在这个key的vnode,然后再进行diff的过程:
elmtomove = oldch[idxinold] /* istanbul ignore if */ if (process.env.node_env !== 'production' && !elmtomove) { // 将找到的key一致的oldvnode再和newstartvnode进行diff if (samevnode(elmtomove, newstartvnode)) { patchvnode(elmtomove, newstartvnode, insertedvnodequeue) // 清空这个节点 oldch[idxinold] = undefined // 移动node节点 canmove && nodeops.insertbefore(parentelm, newstartvnode.elm, oldstartvnode.elm) newstartvnode = newch[++newstartidx] } else { // same key but different element. treat as new element // 创建新的dom节点 createelm(newstartvnode, insertedvnodequeue, parentelm, oldstartvnode.elm) newstartvnode = newch[++newstartidx] }
通过以上分析,给vdom上添加key属性后,遍历diff的过程中,当起始点, 结束点的搜寻及diff出现还是无法匹配的情况下时,就会用key来作为唯一标识,来进行diff,这样就可以提高diff效率。
带有key属性的vnode的diff过程可见下图:
注意在第一轮的diff过后oldch上的b节点被删除了,但是newch上的b节点上elm属性保持对oldch上b节点的elm引用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 微信小程序 共用变量值的实现
下一篇: jQuery列表检索功能实现代码