彻底搞懂Vue虚拟Dom和diff算法

前言

使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉，它扮演着很重要的角色。由于小编接触Vue比较多，React只是浅学，所以本篇主要针对Vue来展开介绍，带你一步一步搞懂它。

虚拟DOM

什么是虚拟DOM？

虚拟DOM（Virtual Dom），也就是我们常说的虚拟节点，是用JS对象来模拟真实DOM中的节点，该对象包含了真实DOM的结构及其属性，用于对比虚拟DOM和真实DOM的差异，从而进行局部渲染来达到优化性能的目的。

真实的元素节点：

<div id="wrap">
    <p class="title">Hello world!</p>
</div>

VNode：

{
   
    tag:'div',
    attrs:{
   
        id:'wrap'
    },
    children:[
        {
   
            tag:'p',
            text:'Hello world!',
            attrs:{
   
                class:'title',
            }
        }
    ]
}

为什么使用虚拟DOM？

简单了解虚拟DOM后，是不是有小伙伴会问：Vue和React框架中为什么会用到它呢？好问题！那来解决下小伙伴的疑问。

起初我们在使用JS/JQuery时，不可避免的会大量操作DOM，而DOM的变化又会引发回流或重绘，从而降低页面渲染性能。那么怎样来减少对DOM的操作呢？此时虚拟DOM应用而生，所以虚拟DOM出现的主要目的就是为了减少频繁操作DOM而引起回流重绘所引发的性能问题的！

虚拟DOM的作用是什么？

1. 兼容性好。因为Vnode本质是JS对象，所以不管Node还是浏览器环境，都可以操作；
2. 减少了对Dom的操作。页面中的数据和状态变化，都通过Vnode对比，只需要在比对完之后更新DOM，不需要频繁操作，提高了页面性能；

虚拟DOM和真实DOM的区别？

说到这里，那么虚拟DOM和真实DOM的区别是什么呢？总结大概如下：

• 虚拟DOM不会进行回流和重绘；
• 真实DOM在频繁操作时引发的回流重绘导致性能很低；
• 虚拟DOM频繁修改，然后一次性对比差异并修改真实DOM，最后进行依次回流重绘，减少了真实DOM中多次回流重绘引起的性能损耗；
• 虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM