Vue采用虚拟DOM的目的是什么?_vue3.0虚拟dom

myzbx 2025-09-12 00:23 28 浏览

虚拟 DOM 更新其实效率并不像大家想象中的那么高，而且 React 官方也从来没说过虚拟 DOM 效率有多高，相反React 虚拟 DOM 的实现也不是所有虚拟 DOM 产品中最好的。

但是通过虚拟DOM的抽象能力，我们拥有了声明式写UI的能力，大大提高了我们的[工作效率」，具体是为什么这要讲到VDOM和真实DOM的相似度来说了。

一、VDOM和真实DOM的相似度

HTML tag 书写方式和 json 的书写方式是差不多的：他们都是树形结构。

DOM是一个树形结构，这个树形结构对应的就是我们的HTML tag,书写HTML其实并不是很费脑，因为一切都抽象成了一个人能够看懂的Tag,层级之间的关系就好像画图一样。如果我们使用javascript api 去书写 HTML tag 是非常痛苦的，所以开发人员就瞄上了和HTML tag 有相似结构的json数据格式。因为json又是javascript的原生对象，所以就让[在javascript中声明式书写html 带来了可能]

但是能够书写html远远已经不能满足我们现代工业的需求，我们需要一种机制：

1、能够声明式地书写html

2、能够在javascript 中书写 html

3、能够小粒度地复用我们的这些"html"

那么，通过babel转化的jsx就应运而生了，让人们拥有了使用js写html并且声明式又可以控制粒度的复用

二、Vue采用虚拟DOM的目的

上面那堆话说的是虚拟DOM的作用，那么Vue引入虚拟DOM的目的就很容易理解了：

1. Vue 2.0引入 vdom 的主要原因是 vdom 把渲染过程抽象化了，从而使得组件的抽象能力也得到提升，并且可以适配DOM以外的渲染目标。

2.不再依赖HTML解析器进行模版解析，可以进行更多的AOT工作提高运行时效率：通过模版AOT编译，Vue的运行时体积可以进一步压缩，运行时效率可以进一步提升；

3.可以渲染到DOM以外的平台，实现SSR、同构温染这些高级特性，Weex等框架应用的就是这一特性。

三、对虚拟DOM的理解

很多人喜欢把数据的更新和虚拟 DOM 进行强行绑定，实际上数据是否更新更快虚拟 DOM 关系真的不大。

虚拟DOM只有在HTML tag(或者是VDOM的node type)剧烈变化的时候才会体现他的好处：局部替换HTML tag(替换vnode)。任你数据再怎么变都好，其实DOM本身根本不懂你数据是否变化。因此，明白这些以后，应该就能明白，虚拟DOM引入最大的好处就是：

1.组件的高度抽象化

2.可以更好的实现SSR,同构渲染等

3.框架跨平台TG：li9047

DOM 方法

上一篇：详解虚拟DOM与Diff算法_虚拟dom的工作原理
下一篇：React在开发中的常用结构以及功能详解

Vue采用虚拟DOM的目的是什么?_vue3.0虚拟dom

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿