vue 虚拟DOM

虚拟DOM：Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。

由页面渲染过程可知，虚拟DOM可以理解为保存了一棵DOM树被渲染之前所包含的所有信息。

目的：虚拟dom就是为了减少js与DOM的交互而设计的。

步骤：

1. 以虚拟dom的形式存储旧的dom信息；
2. 检测到数据更新，先在JavaScript中将需要修改的节点全部修改完成；
3. 将最终生成的虚拟DOM更新到视图中去

简单来说，虚拟DOM是用Object来代表一颗节点，这个Object叫做VNode，然后使用两个VNode进行对比，根据对比后的结果修改真实DOM。

为什么是两个VNode？因为每次渲染都会生成一个新的VNode，然后和上一次渲染时用的VNode进行对比。然后将这一次新生成的VNode缓存，用来进行下一次对比。

算法：

Vue的diff算法：仅在同级的vnode间做diff

这篇文章图文并茂的对vue diff算法进行了介绍

这篇文章是我总结了几位博主的博客写的，参考链接：

https://blog.csdn.net/m6i37jk/article/details/78140159

https://blog.csdn.net/dkr380205984/article/details/81215712