Javascript 为什么Vue.js使用VDOM？

，它在引擎盖下使用VDOM来呈现UI。据我所知，VDOM的发明主要是为了避免“跟踪依赖”。有了VDOM，就可以在不知道到底发生了什么变化的情况下协调应用程序的更大部分。因此，可以使用普通对象和数组来描述视图，只需将更改通知框架（如React中的

setState

）。然后，比较两个VDOM树，并将所需的最小更改集应用于实际DOM

---

另一方面，Vue.js使用跟踪的依赖项。它确切地知道发生了什么变化，因此可以使用DOM绑定。此外，由于大多数Vue.js用户已经在使用模板语言，因此它并没有从VDOM提供的更大的灵活性中获益。那么为什么Evan决定使用VDOM呢？

这个设计决策有几个方面

可维护性和灵活性。直接DOM绑定（如Vue 1.x中的直接DOM绑定）对于单个绑定来说确实是高效和直接的，但当涉及列表时就不是这样了。当涉及到合成时，它变得更加复杂（例如插槽机制）。对于每一种这样的特性（包括片段的组合），都需要编写专门的有状态代码，它们可能会相互影响，使系统更难维护。使用VDOM可以清晰地将最终的DOM操作与功能层分离——功能代码现在通过声明性地组合VNode来工作，从而使维护和添加新功能变得更加容易

此外，VDOM的这种灵活性还可以通过允许用户绕过模板直接编写渲染函数而向用户公开

VDOM diffing不是免费的-事实上，当您在大型组件树的根目录下设置state（）时，它可能非常昂贵。这就是为什么在React中需要使用

PureComponent

或实现

shouldComponentUpdate

来绕过组件树的一部分。有了dep跟踪系统，我们可以自动更准确地检测需要更新的组件，因此即使是VDOM也可以从dep跟踪系统中获益

依赖项跟踪也有其成本——对于每个绑定，它需要为跟踪的依赖项分配内存。超细粒度绑定意味着在一个应用程序中会有成千上万的被动观察者，从而导致额外的内存使用。跟踪系统的粒度取决于我们正在构建的应用程序类型。根据对典型应用程序结构的观察，Vue 2通过跟踪每个组件的依赖关系，使用了某种“中等粒度”策略，从而使每个组件成为反应式更新边界

---

因此，将两者结合起来，我们可以从双方获得好处：）

我想vdom将有助于服务器端渲染。您可以在这里阅读更多信息（）模板语言可以在服务器上呈现，而无需使用VDOM抽象。您只需要将模板编译为返回字符串（或字符串流）的函数。太棒了！谢谢你的回答。我已经看过你在Nordic.js（）上关于这个主题的精彩演讲，它已经涵盖了一些方面。