Vue进入2.0以来在其内部加入了虚拟dom的实现,减少了dom的操作,极大提高了性能,同时其diff算法的时间复杂度为O(n),性能很高。
虚拟dom
首先我们来看下什么是虚拟DOM(virtual DOM ),虚拟DOM就是提通过js生成一个dom对象,之后通过diff算法比较之后生成patch,即补丁,之后虚拟dom通过补丁更新,再渲染成真实DOM显示出来,可以看到只涉及到了一次DOM操作,效率、性能无疑很高。
具体实现步骤:
- 初始化时创建虚拟dom树
- 将虚拟dom render成实体dom,显示出来
- 当前dom节点发生改变时,会生成新的虚拟dom(修改了旧dom)
- 新旧虚拟dom比对之后生成patch对象
- 根据patch对象更正旧虚拟dom,之后render
diff实现
明白了虚拟节点之后我们就以下面代码为例来详细说明下diff的具体操作:
<ul>
<li>1</li>
<li>2</li>
</ul>
在vue中就会生成虚拟dom结构,大概结构如下:
{
tag: 'ul',
children: [
{ tag: 'li', children: [ { vnode: { text: '1' }}] },
{ tag: 'li', children: [ { vnode: { text: '2' }}] },
{ tag: 'li', children: [ { vnode: { text: '3' }}] },
]
}
假如此时我们对当前dom结构进行reverse操作的话,就会变成以下节点树:
{
tag: 'ul',
ch