什么是虚拟DOM-【图解】

读书过一遍，看视频过一遍，自己再总结一遍，总归不会那么容易忘记了吧~🤓

What

什么是虚拟DOM

一种对真实DOM的抽象（本质上是JavaScript对象），将DOM的实际变更状态映射为视图的一种解决方案

原理

使用状态生成虚拟节点，然后使用虚拟节点来渲染视图

例如：DOM中字体颜色发生改变时，就会产生一个状态，并生成了对应的虚拟Dom，虚拟DOM再进一步处理，渲染出了变化后的真实DOM

Why

为什么要引入虚拟DOM

框架设计原因-减少对真实DOM的操作

原生JS操作数据更新时，找出对应元素，执行更新操作即可，如下图：

框架更新数据时，需要找出数据变更和页面更新的关系【这点很难做到】。

要么暴力更新，即删除全部原有DOM，生成一份新的DOM【代价太大】。

被迫引入虚拟DOM，每次生成一份新的虚拟DOM，比较新旧虚拟DOM之间的不同来执行更新操作，示意图如下：

跨平台原因-磨平差异化【例如：小程序、移动APP、桌面应用等】

How

Vue.js中的虚拟DOM是怎样运作的？

【前置知识点】vnode是什么？

在Vue.js中存在一个Vnode类，可以利用它来实例化不同类型的vnode类型，不同的实例类型着各自表示着不同类型的DOM元素。

在使用Vue.js的过程中，我们晓得它是通过模板来描述状态与DOM之间的映射关系。并通过编译将模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟节点树，最终通过它就可以渲染页面。如下图所示：

上图中vnode对应着真实的DOM元素，而patch则是虚拟DOM最核心的部分。

• patch可以将vnode渲染成真实的DOM。
• 渲染过程中并不是全量覆盖原有的DOM，而是对比新旧两个vnode之间有哪些不同，根据具体需要更新节点。

结合patch，下图是虚拟DOM的整体执行流程：

小结：

虚拟DOM在Vue.js中的所作所为：

• 提供与真实DOM节点对应的虚拟节点vnode；
• 将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图。