According to Vue.js' documentation ，它在底层使用 VDOM 来呈现 UI。据我了解，VDOM 的发明主要是为了避免“跟踪依赖”。使用 VDOM，可以在不知道到底发生了什么变化的情况下协调应用程序的更大部分。因此，可以使用普通对象和数组来描述 View ，只需要通知框架有关更改(如 React 中的 setState)。然后，比较两个 VDOM 树并将所需的最小更改集应用到真实的 DOM。
另一方面，Vue.js 使用跟踪依赖项。它确切地知道发生了什么变化，因此可以使用 DOM 绑定(bind)。此外，由于大多数 Vue.js 用户已经在使用模板语言，因此它并没有真正受益于 VDOM 提供的更大灵 active 。那么为什么 Evan 决定使用 VDOM？
最佳答案
这个设计决定有几个方面。
可维护性和灵 active 。直接 DOM 绑定(bind)(如在 Vue 1.x 中)对于单个绑定(bind)确实是高效和直接的，但在涉及列表时就不那么高效了。当涉及组合时，它会变得更加复杂(例如插槽机制)。对于每一种这样的特性(涉及片段的组合)，都需要编写专用的有状态代码，它们可能会相互影响，使系统更难维护。使用 VDOM 将最终的 DOM 操作与特征层完全分离 - 特征代码现在通过声明式组合 VNode 来工作，从而更容易维护和添加新特征。
另外，VDOM的这种灵 active 也可以让用户绕过模板，直接编写渲染函数，从而展现给用户。
VDOM diffing 不是免费的 - 事实上，当您在大型组件树的根部
setState()时，它可能会非常昂贵。这就是为什么在 React 中你需要使用PureComponent或实现shouldComponentUpdate来绕过部分组件树。有了 dep 跟踪系统，我们可以自动且更准确地检测需要更新的组件，因此即使 VDOM 也可以从拥有 dep 跟踪系统中受益。依赖性跟踪也有其成本 - 对于每个绑定(bind)，它需要为跟踪的依赖性分配内存。超细粒度的绑定(bind)意味着应用程序中将有成千上万的响应式(Reactive)观察者，从而导致额外的内存使用。跟踪系统的粒度应该取决于我们正在构建的应用程序类型。基于对典型应用程序结构的观察，Vue 2 通过跟踪每个组件的依赖关系，使用了一种有点“中粒度”的策略，从而使每个组件成为一个响应式(Reactive)更新边界。
所以 - 将两者结合起来，我们可以从两方面获得好处:)
关于javascript - 为什么 Vue.js 使用 VDOM？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44238139/