说说 Vue 的虚拟 DOM、Diff 策略与更新粒度。

[问答题]

秋水夏树

虚拟 DOM：模拟真实 DOM 的对象。多次更新合并批量操作减少回流。 Diff 算法：逐层遍历、同层比较、深度优先。双端对比。状态提升、补丁标题、静态跳过（Vue3）

发表于 2025-09-17 19:02:10 回复(2)

WangYibo

JS对象模拟真实DOM的中间层，同层比较，双端对比；组件更新和编译优化

发表于 2026-01-14 14:06:23 回复(0)

牛客41767380号

虚拟DOM是用JS对象模拟真是DOM的一个中间层，Diff策略通过同层比较，双端对比来高效找出最小差异并通过组件级更新和编译时优化来控制更新粒度，避免直接操纵真是DOM的性能开销

发表于 2026-01-10 14:54:44 回复(0)

amourmm

vue的虚拟dom就是虚拟节点，不管是组件还是元素，在vue内都是一个个虚拟节点。vue在渲染页面时，首先会创建一个虚拟节点，然后用虚拟节点创建出的真实dom插入到页面中，渲染页面。当需要重新渲染页面时，可以将上次创建的虚拟节点缓存起来，将新创建的虚拟节点与缓存的虚拟节点做比对，在此基础上更新试图。在vue中，采用虚拟dom去渲染视图的，当属性发生改变时，只需要更新组件中的一个节点，而不是整个组件都要更新。所以可以将缓存的虚拟节点与新创建的节点做比对，在此基础上去更新试图，这样可以节省性能，避免不必要的计算。

发表于 2025-12-22 11:00:39 回复(0)

我从未看清

虚拟dom：一个javaScript对象。减少对真实dom的操作，减少性能上的开销 diff策略：首先就是同级节点比较。Vue只会对同级节点进行比较，对于跨层级节点，只会进行销毁，重新挂载节点。在Vue3中有新特性patch Flags 可以对动态的节点打上类型标记，vue组件数据变化时，Vue会对比旧虚拟Dom和新虚拟Dom 中被标记的动态的节点的变化，若只是属性数据方面变化就会替换值，复用节点提高效率。若标签类型tag和key唯一的身份标识改变，就会销毁重建节点。最后将虚拟dom渲染为真实Dom 。双端对比：就是先对比新旧虚拟Dom的首尾两端更新粒度：核心就是组件级更新，以组件为单位触发。当组件响应式数据变化，Vue会触发组件重新渲染，生成新的虚拟Dom节点，新旧虚拟Dom节点执行diff算法，最终更新变化真实Dom节点

发表于 2025-11-30 12:37:51 回复(0)