为什么Vue.js使用VDOM？

Question

According to Vue.js' documentation，它使用引擎盖下的VDOM来呈现UI。根据我的理解，VDOM主要是为了避免“跟踪依赖性”而发明的。借助VDOM，可以调整应用程序的大部分内容，而不必知道究竟发生了什么变化。因此，可以使用普通对象和数组来描述视图，只需要通知框架有关更改（如React中的setState）。然后，将两个VDOM树进行比较，并将最小的所需更改集应用于真实DOM。

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

Answer 1

这个设计决定有几个方面。

1. 可维护性和灵活性。直接DOM绑定（如Vue 1.x中）对于单个绑定确实高效且直接，但涉及到列表时并非如此。当涉及组合时（例如插槽机制），它变得更加复杂。对于每一种这样的特征（涉及片段的组合），需要编写特殊用途的有状态代码，它们可能会相互影响，使系统难以维护。使用VDOM干净地将最终的DOM操作与要素图层分开 - 功能代码现在通过声明性地编写VNodes来工作，使维护和添加新功能变得更加容易。

   此外，VDOM的这种灵活性也可以通过让用户绕过模板并直接创作渲染功能而暴露给用户。

2. VDOM差异不是免费的 - 事实上，如果您在大型组件树的根目录中使用setState()，它可能会非常昂贵。这就是为什么在React中，您需要使用PureComponent或者执行shouldComponentUpdate来绕过部分组件树。通过dep跟踪系统，我们可以自动更准确地检测需要更新的组件，所以即使VDOM也可以从dep跟踪系统中受益。

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

所以 - 两者结合，我们那种从双方得到的好处:)