Vue中的虚拟DOM

---

一、什么是虚拟DOM

我们都知道DOM是什么，它是实实在在的被渲染在页面上的，我们平时的操作都和DOM息息相关。那什么是虚拟DOM？首先，虚拟DOM一定是我们看不见的，我们看得见的都叫做真实DOM。
虚拟DOM其实是Vue创建的抽象的DOM，是以一颗以JavaScript对象(VNode)节点为基础，用对象属性来描述节点的树。简单来说，就是一个js对象，至少包含了（tag）标签名、（attrs）属性名、（children）子元素对象三个属性。

二、虚拟DOM的作用

提高性能

当我们更改某个节点时，往往是直接覆盖了原来的节点，当其是一个拥有多个子节点时的DOM时，如果只改了其中一个子节点，就需要重新覆盖整个节点，会造成不必要的性能浪费。

虚拟DOM在其中起到的作用简单来说就是：通过对比新旧虚拟DOM，来判断哪些节点是需要改的，哪些节点是不需要改的，这一步是diff算法实现的，所以可以智能地计算出重新渲染组件的最小代价。之后会通过patch算法将虚拟DOM转换为真实DOM。然后展现到视图上

三、通过模板转换成视图来理解

Vue.js是通过编译将template模板转换成渲染函数render的，执行渲染函数就可以得到一个虚拟节点树。之后通过对比新旧虚拟DOM的差异得出最优解，渲染到视图上。