为什么Vue.js使用VDOM? [英] Why is Vue.js using a 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.
-
可维护性和灵活性.对于单个绑定，直接DOM绑定(如Vue 1.x中)确实是有效且直接的，但是在涉及列表时却没有那么多.当涉及合成时，它变得更加复杂(例如，插槽机制).对于每种此类功能(涉及片段的组成)，都需要编写专用的有状态代码，并且它们可能会相互影响，从而使系统难以维护.使用VDOM可以将最终的DOM操作与功能层完全分开-功能代码现在可以通过声明性地组成VNode来工作，从而使维护和添加新功能变得更加容易.
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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
