vue中虚拟dom和diff算法

什么是虚拟DOM（virtual DOM）：

       它是通过JS的Object对象模拟DOM中的节点。

为什么使用虚拟DOM：

       使用js操作DOM时（增删改查等等），那么DOM元素的变化自然会引起页面的回流（重排）或者重绘，页面的DOM回流（重排）或者重绘自然会导致页面性能下降，那么如何尽可能的去减少DOM的操作是框架需要考虑的一个重要问题！

真实DOM和虚拟DOM的区别：

      1、虚拟DOM不会进行排版与重绘操作；

      2、真实DOM频繁排版与重绘的效率是相当低；

      3、虚拟DOM进行频繁修改，然后一次性比较（使用diff算法）并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗；

       4、虚拟DOM有效降低了重绘与排版的次数，因为，最终把虚拟dom与真实DOM比较差异，可以只渲染局部。

diff算法：

1、 diff算法的作用：

虚拟DOM，是一种为了尽可能减少页面频繁操作DOM的方式，那么在虚拟DOM中，通过什么方式才能做到呢? 就是Diff算法进行对比

2、diff算法的原理：

       逐步解析newVdom的节点，找到它在oldVdom中的位置，如果找到了就移动对应的DOM元素，如果没找到说明是新增节点，则新建一个节点插入。遍历完成之后如果oldVdom中还 有 没处理过的节点，则说明这些节点在newVdom中被删除了，删除它们即可。

面试题：请问你怎么理解虚拟DOM和diff算法

1)、什么是虚拟dom和diff算法：

虚拟DOM: 用JSON对象模拟的真实dom，用来提升性能

diff算法：用来比较两个虚拟dom的不同之处。

2）、步骤（思路，流程）

2.1）、产生两个虚拟DOM树：newVDom，oldVDom。

2.2）、oldVDom和真实DOM保持一致

2.3）、数据变化时，影响的是（操作的是）newVDom

2.4）、操作newVDom后，通过diff算法对比newVDom和oldVDom的差异，并在oldVDom标注哪些节点要删除，哪些节点要增加，修改

2.5）、根据oldVDom操作真实的DOM，让真实Dom和oldVDom保持一致

3）、diff算法的解释：

逐步解析newVdom的节点，找到它在oldVdom中的位置，如果找到了就移动到下一个的DOM元素，如果没找到说明是新增节点，则新建一个节点插入。遍历完成之后如果oldVdom中还 有 没处理过的节点，则说明这些节点在newVdom中被删除了，删除它们即可。