为什么Vue.js使用VDOM?

时间:2017-05-29 08:42:58

标签: javascript vue.js rendering frontend

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

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

1 个答案:

答案 0 :(得分:17)

此设计决定有几个方面。

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

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

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

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

  4. 所以 - 结合这两者,我们可以从双方获益:)