Vue虚拟Dom与diff算法如何实现高效更新？

本文共计2273个文字，预计阅读时间需要10分钟。

前言：使用过Vue和React的小伙伴们一定对虚拟DOM和diff算法很熟悉，它扮演着非常重要的角色。由于我更熟悉Vue，所以本篇主要针对Vue进行展开介绍，带你一步步搞懂它。

前言

使用过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框架中为什么会用到它呢？好问题！那来解决下小伙伴的疑问。