为什么 Vue.js 使用 VDOM?

问题描述

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

According to Vue.js' documentation, it is using a VDOM under the hood to render the UI. From my understanding, the VDOM was mainly invented in order to avoid "tracked dependencies". With a VDOM, it is possible to reconcile bigger parts of the application without knowing what exactly has changed. As a result, one can use plain objects and arrays to describe the view and just needs to inform the framework about a change (like setState in React). Then, both VDOM trees are compared and the minimal set of required changes is applied to the real DOM.

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

Vue.js, on the other hand, uses tracked dependencies. It knows exactly what has changed, so it would be possible to use DOM bindings. Furthermore, since most Vue.js users are already using the templating language, it doesn't really benefit from the greater flexibility provided by a VDOM. So why did Evan decide to use a VDOM?

推荐答案

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

There are several aspects to this design decision.

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

1. Maintainability and flexibility. Direct DOM bindings (as in Vue 1.x) are indeed efficient and straightforward for single bindings, but not so much when lists are involved. It gets even more complicated when composition is involved (e.g. the slots mechanism). For each kind of such features (that involves composition of fragments), special-purposed stateful code needs to be written and they may affect each other, making the system harder to maintain. Using a VDOM cleanly separates the eventual DOM manipulations from the feature layer - the feature code now works by declaratively composing VNodes, making it much easier to maintain and add new features.

此外，VDOM 的这种灵活性也可以通过允许用户绕过模板直接编写渲染函数来向用户展示.

In addition, this flexibility of VDOM can also be exposed to users by allowing them to bypass the template and directly author render functions.

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

VDOM diffing is not free - in fact it could be quite expensive when you setState() at the root of a large component tree. This is why in React you need to use PureComponent or implement shouldComponentUpdate to bypass part of the component tree. With a dep tracking system, we can automatically and more accurately detect the components that need to update, so even VDOM can benefit from having a dep tracking system.

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

Dependency tracking also has its costs - for each binding it needs to allocate memory for tracked dependencies. Super fine-grained bindings means there will be thousands of reactive watchers in an app, leading to extra memory usage. How granular the tracking system should be is dependent on what type of apps we are building. Based on observation of typical app structures, Vue 2 uses a somewhat "medium-grained" strategy by tracking dependencies for each component, thus making each component a reactive update boundary.

所以 - 将两者结合起来，我们可以从双方获得好处:)

So - combining the two we kind of get the benefits from both sides :)

这篇关于为什么 Vue.js 使用 VDOM?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！