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

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

推荐答案

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

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

    此外,VDOM的这种灵活性还可以通过允许用户绕过模板直接编写渲染函数而向用户公开.

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

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

因此,将两者结合起来,我们可以从双方获得好处:)

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

将事件监听器绑定到动态元素

如何默认打开一个v-list-group?

Vue 3:插槽属性 - 可以通过 props 传递数据吗?

Vue,Composition API:如何从react 式转换中跳过深度嵌套的属性?

Vuetify 扩展面板,面板标题左侧带有图标

VuetifyJS,outer-link 未显示为光标

在 Vue 中,如何使用 npm run build 将 .htaccess 包含到生产环境中?

Vue 两种方式的 prop 绑定

根据 URL 有条件地隐藏视图组件

Vuetify 容器不会填充高度

如何在 Vue.js 中传递 $router.push 中的数据?

等待来自 WDS 的更新信号

Laravel Blade 模板将数据传递给 Vue JS 组件

如何在 Vue.js 3 中使用 Vue 3 Meta?

使用 Firebase Auth for Google 将匿名用户转换为注册用户

如何使用 Vue Test utils 测试输入是否聚焦?

vuex 是 state.array.push react式的吗?

如何在 Vue 数据对象中运行函数?

Vue.js 无法读取 null 的属性 length长度