vue进阶测试——虚拟dom是什么？

水深无声 2021-09-15 22:32 355阅读 0赞

在深入探究虚拟dom的原理之前，先了解一下其概念是十分有必要的一件事。

什么是虚拟dom？

官网给出的概念：Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。

一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上，这些步骤在[浏览器的渲染过程及页面加载的优化方案][Link 1]一文中有详细的说明。

而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。

这么说可能还是有点生硬，下面用一个实例来说明一下传统dom操作和虚拟dom操作的不同点

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

如上dom结构所示，现在需要将数字1所在的标签删除，在3所在的标签后面加入一个包含4的li标签。（你也可以理解为，li里的数据都加一）

用传统jquery操作dom的思想，可以先删除<li>1</li>标签（remove),插入<li>4</li>标签（append)

上述操作包含了两个JavaScript和DOM之间的交互操作，虽说JavaScript的设计初衷就是实现DOM交互，但这种操作的性能问题依旧存在，所以我学习JavaScript的第一节课就被告知要尽量减少js和dom的交互。虚拟dom就是为了减少这种交互而设计的，那么虚拟dom会如何处理上述问题呢？

第一步：通过树的形式保存旧的dom信息，这些信息可能在页面第一次加载的时候被渲染到浏览器中，但仍是通过虚拟dom的方式创建的

第二步：检测到数据更新，需要更新dom，先在JavaScript中将需要修改的节点全部修改完成（这个步骤可以进行算法上的优化，会在后面的原理中详细说明）

第三步：将最终生成的虚拟DOM更新到视图中去。

上述三个步骤只需要进行一次dom交互就可以完成视图的更新，因为所有有关dom的操作都预先通过操作数据方式在JavaScript中完成了，这样做的好处不言而喻，而付出的代价只是在你的内存中需要保存一份可供维护的数据信息。

关于虚拟dom和数据双向绑定的源码分析下面有两篇质量较高的git传送门（带详细注释）

[数据双向绑定][Link 2]

[虚拟dom][dom]

[Link 1]: https://blog.csdn.net/dkr380205984/article/details/81153585
[Link 2]: https://github.com/DDFE/DDFE-blog/issues/17
[dom]: https://github.com/DDFE/DDFE-blog/issues/18

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js 中的虚拟 DOM 是什么？如何使用虚拟 DOM？

Vue.js 中的虚拟 DOM 是什么？如何使用虚拟 DOM？什么是虚拟 DOM？虚拟 DOM（Virtual DOM）是一种用于优化页面渲染性能的技术。它是由

快来打我*/ 2024年03月16日 13:24/ 0 赞/ 83 阅读

相关什么是React的虚拟DOM（Virtual DOM）？它的作用是什么？

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

不念不忘少年蓝@/ 2024年02月23日 03:36/ 0 赞/ 143 阅读

相关【vue】虚拟dom的原理是什么?手写实现虚拟dom !

1.虚拟dom的原理虚拟 DOM 是对 DOM 的抽象，本质上就是用 JavaScript 对象来描述 DOM 结构。Vue.js 中关于虚拟 DOM 的实现主要进行了

r囧r小猫/ 2024年02月19日 11:37/ 0 赞/ 74 阅读

相关 vue.js 里面，什么是虚拟DOM?

Vuejs 将DOM 抽象成一个以JavaScript 对象为节点的虚拟DOM树,以VNode节点模拟真实的DOM，可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作,

川长思鸟来/ 2023年08月17日 16:28/ 0 赞/ 136 阅读

相关面试官：什么是虚拟DOM？如何实现一个虚拟DOM？

故心故心故心故心小故冲啊 -------------------- 文章目录一、什么是虚拟DOM 二、为什么需要虚拟DOM 三、如何实现虚拟DOM

青旅半醒/ 2023年01月07日 12:24/ 0 赞/ 186 阅读

相关面试官：什么是虚拟DOM？如何实现一个虚拟DOM？

![format_png][] 一、什么是虚拟DOM 虚拟 DOM （`Virtual DOM` ）这个概念相信大家都不陌生，从 `React` 到 `Vue` ，虚拟

约定不等于承诺〃/ 2022年12月30日 10:47/ 0 赞/ 189 阅读

相关什么是 React 虚拟 DOM?

我们都知道 react 中 state 发生改变, render 函数重新执行渲染页面那么自己实现这个功能的思路? 1. 定义 state,有了数据 2. 有一个

缺乏、安全感/ 2022年12月10日 01:25/ 0 赞/ 283 阅读

相关【JavaScript】DOM进阶

DOM进阶一、DOM是什么？ DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对

港控/mmm°/ 2022年07月14日 07:20/ 0 赞/ 291 阅读

相关 JavaScript进阶--DOM

DOM 一、相关知识二、开始行动 1. 返回带有指定名称的节点对象的集合 2. 返回带有指定标签名的节点对象的集合

落日映苍穹つ/ 2021年09月23日 09:26/ 0 赞/ 417 阅读

相关 vue进阶测试——虚拟dom是什么？

在深入探究虚拟dom的原理之前，先了解一下其概念是十分有必要的一件事。什么是虚拟dom？官网给出的概念：Vue通过建立一个虚拟DOM树对真实DOM发生的变化

水深无声/ 2021年09月15日 22:32/ 0 赞/ 356 阅读