为什么Vue.js使用VDOM？

Question

根据Vue.js的文档,它正在使用引擎盖下的VDOM来呈现UI.根据我的理解,VDOM主要是为了避免"跟踪依赖"而发明的.使用VDOM,可以在不知道确切更改的情况下协调应用程序的更大部分.因此,可以使用普通对象和数组来描述视图,只需要通知框架有关更改(如setState在React中).然后,比较两个VDOM树,并将最小的所需更改集应用于真实DOM.

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

Answer 1

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

1. 可维护性和灵活性.直接DOM绑定(如在Vue 1.x中)对于单个绑定确实有效且简单,但在涉及列表时则不是那么多.当涉及组成时(例如,插槽机制),它变得更加复杂.对于每种这样的特征(涉及片段的组合),需要编写专用的有状态代码,它们可能相互影响,使系统更难维护.使用VDOM将最终的DOM操作与要素层完全分离 - 现在,要素代码通过声明性地组合VNode,使维护和添加新功能变得更加容易.

   此外,VDOM的这种灵活性也可以通过允许它们绕过模板并直接创作渲染功能来向用户公开.

2. VDOM差异并不是免费的 - 事实上,当你setState()在一个大型组件树的根目录时,它可能会非常昂贵.这就是为什么在React中你需要使用PureComponent或实现shouldComponentUpdate绕过组件树的一部分.通过dep跟踪系统,我们可以自动且更准确地检测需要更新的组件,因此即使VDOM也可以从dep跟踪系统中受益.

3. 依赖性跟踪也有其成本 - 对于每个绑定,它需要为跟踪的依赖项分配内存.超细粒度绑定意味着应用程序中将有成千上万的被动观察者,导致额外的内存使用.跟踪系统的精确程度取决于我们正在构建的应用程序类型.基于对典型应用程序结构的观察,Vue 2通过跟踪每个组件的依赖性来使用某种"中等粒度"策略,从而使每个组件成为反应性更新边界.

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