很多同学在面试的时候都会被问到vue的虚拟DOM的diff 以及 patch 的过程，如果这vue的源码了解不是很深刻，很难通过面试官的法眼，下面就来用通俗易懂的方式聊一聊Vue的patch过程我们都知道Dom操作是一个特别低性能的事儿；1响应式原理Vue使用响应式数据绑定机制，当数据变化时，自动更新相关的DOMReact使用虚拟DOM和diff算法，通过比较前后两次虚拟DOM的差异来更新真实DOM，从而提高渲染性能2数据流Vue使用双向绑定，即数据的变化可以自动。

因此，就需要进行比较暴力的比对，React是通过虚拟DOM的比对，Angular是使用脏检查的流程Vuejs的变化侦测和它们都不一样，它在一定程度上知道具体哪些状态发生了变化，这样就可以通过更细粒度的绑定来更新视图也就是说。

vue的虚拟dom会操作dom吗?

看那个地方做了改变，然后在渲染DOM的时候只需要把改变的 地方打补丁放在页面结构上就可以了 实际上虚拟DOM就是根据真实的DOM一一映射的数据结构，然后对数据结构进行操作，最终把这个数据结构的变化反映在真实的DOM中。

当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿 当更新完成后，执行updated，数据已经更改完成，dom也重新。

这样可以减少客户端的 JavaScript 代码量，提高页面加载速度，同时也可以提高搜索引擎优化SEO的效果 Vue 的预渲染机制是基于 Vue 的模板编译机制实现的Vue 会将模板编译成虚拟 DOM 渲染函数，当数据发生变化时，Vue。

react是Facebook公司创建的js框架，并创新了新的语法，JSXhtml in javascript，而vue相对来说更容易学习，且使用模板系统，Reat与Vue只有框架的骨架，其他的功能如路由状态管理等是框架分离的组件2关于虚拟dom 改变。

用 VDOM 更新真实 DOM 其实是在节约开销运行效率和节约心智省事提高开发效率之间找到一个比较好的平衡点不然为什么人家 React 和 Vue 要用 VDOM 呢成千上万人验证过的东西，能流行一定有它的道理。

d4b5dfd6da0b Vuejs20版本与React的其中最大一个相似之处，就是他们都使用了一种叫#39Virtual DOM#39的东西所谓的Virtual DOM基本上说就是它名字的意思虚拟DOM，DOM。

Vue 和 React 都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面而隐藏在背后的原理便是其高效的Diff算法Vue 和 React 的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设基于。

vue虚拟dom原理面试题

1、原理eventloop事件循环 在下次 DOM 更新循环结束之后执行延迟回调在修改数据之后立即使用这个方法，获取更新后的 DOMkey 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes不指定key时，Vue 会使用。

2、1虚拟DOMVirtual DOM，顾名思义，从字面上理解就是虚构的DOM树，当我们用传统的原生API或者jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程即使计算机硬件一直在更新迭代，但是操作真实DOM的代价仍旧。

3、执行DOM操作获取节点时，取到的仍是之前的结构，新增的节点并未获取到原因分析猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取解决方法使用VuenextTick，看下官方材料。

4、Vue 的响应式原理还涉及到虚拟 DOM虚拟 DOM 是一个轻量的 JavaScript 对象，它描述了真实 DOM 的结构当数据发生变化时，Vue 会对虚拟 DOM 进行比较，找出需要更新的地方，然后只更新需要更新的部分这种优化机制使得 Vue 应用程序的。

5、Key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后VUe进行新虚拟DOM 与 旧虚拟DOM的差异对比，比较规则如下1旧虚拟Dom中找到了与新虚拟DOM相同的key#160#160#160#160。

6、我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面而隐藏在背后的原理便是其高效的Diff算法1 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构2。