vue中的虚拟dom

九仞山

已于 2023-07-06 23:08:31 修改

阅读量4.6k

点赞数 4

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-06-06 22:25:35 首次发布

本文链接：https://blog.csdn.net/w137160164/article/details/131076917

版权

Vue 专栏收录该内容

15 篇文章 6 订阅

订阅专栏

什么是虚拟DOM

DOM操作是Web开发中非常昂贵和低效的操作，尤其是在用户界面频繁更新的情况下。此时，在每次数据更新时重新渲染整个DOM树会导致应用程序性能下降。

为了解决这个问题，虚拟DOM被引入到前端开发中。虚拟DOM把整个DOM树抽象成一个JS对象，这样开发者就可以直接操作JS对象，而不需要频繁地操作DOM。

虚拟DOM简化了DOM操作，同时通过优化算法确保最小化DOM操作次数，从而提高应用性能。

Vue中虚拟DOM介绍

Vue中的虚拟DOM是一种高效而强大的技术，它在实现数据驱动视图的同时，可以实现快速的渲染和更新UI。在Vue中，我们可以使用Vue的模板语法来创建视图。Vue将模板转换成实际的DOM元素，并将其插入到文档中。在线性模型中，每次更新视图时都需要使用JavaScript操作DOM元素来实现。这些操作可能包括创建、更新、插入、删除或移动DOM元素。

因为刷新UI的性能瓶颈通常在于DOM操作，Vue引入了虚拟DOM的概念。虚拟DOM是一个包含所有节点和标记的JavaScript对象树，它映射到实际的DOM。与实际的DOM不同，虚拟DOM具有轻量级、高效和快速修改的特点。

在Vue中，每个组件树都有一个相应的虚拟DOM树。当应用状态发生变化时，Vue会比较新状态和旧状态的虚拟DOM树，找出发生变化的部分并渲染成具体DOM操作，最终只需要对变化的部分进行DOM操作。

在Vue中，每个虚拟DOM节点都与一个Vue组件实例相联系。当组件状态发生变化时，Vue会重建虚拟DOM树并找出变化的部分。

Vue中虚拟DOM工作原理

当Vue运行时，它将虚拟DOM和实际的DOM树同步，当数据发生变化时，Vue运行重新计算虚拟DOM树，查找和标记发生变化的节点，并将它们更新到实际的DOM树上。

创建虚拟DOM节点树

Vue在创建虚拟DOM时，会将模板解析为一些抽象的节点，然后将这些抽象的节点转换成虚拟DOM节点。每个节点都包含了节点类型、属性列表和子节点列表。

在Vue中，可以使用createElement函数来创建虚拟DOM节点。createElement函数接受三个参数，分别是标签名、属性对象和子节点：

createElement('div', { class: 'container' }, [
  createElement('h1', { class: 'title' }, 'Hello World'),
  createElement('p', { class: 'text' }, 'This is a paragraph.'),
])

比较更新虚拟DOM节点树

当Vue数据发生变化时，它将重新计算虚拟DOM树，并查找与之前版本不同的节点。Vue通过比较新老两个虚拟DOM来查找这些节点，并确定哪些节点需要更新。这个过程被称为“差异算法”

执行DOM操作，应用差异

当Vue运行重新计算虚拟DOM时，它会得到一组描述如何更新DOM的指令。这些指令告诉Vue应该在哪里插入、删除或修改元素。Vue会根据这些指令进行真正的DOM操作，从而实现更新UI。

因此，Vue中针对差异对比所采用的算法，可以归纳为以下三个步骤：

在JS对象上对比，找出新增和删除的节点。
对节点进行分类，找出需要重新排序的节点和位置移动的节点。
更新DOM节点。

虚拟DOM具有以下优点

速度更快：由于DOM操作非常耗费资源，使用虚拟DOM可以避免频繁操作真实DOM树，提高性能。
组件化开发：Vue将应用拆分成小的、高度可复用的组件，并对每个组件使用单独的虚拟DOM树，使得组件的开发和维护更加容易。
独立于平台：虚拟DOM与浏览器无关，也不依赖于任何特定的用户界面库或框架，因此可在不同平台和环境中使用。
优化开发流程：通过比较新旧虚拟DOM树的差异，开发人员可以更准确地知道哪些部分需要更新，从而优化页面渲染流程。

v-for指令中为什么需要设置key值

v-for是Vue中一个重要的指令，它用于动态地渲染列表。当Vue处理一个含有v-for的元素时，Vue会重复使用相同的DOM元素，而不是每次都新建一个DOM元素。为了避免出现问题，当Vue使用v-for指令渲染列表时，每个渲染出来的DOM元素都需要一个唯一的标识符。当数据发生变化时，Vue通过key来判断哪个元素是新的、哪个元素被删除了、哪个元素被移动了。

设置key属性可以让Vue跟踪哪些元素已经被添加、更新或者删除，从而减少DOM操作的次数。如果没有设置key属性，Vue可能会错误地认为两个不同的元素是相同的，从而导致DOM渲染错误。

没有设置key值的问题

如果我们没有设置key值，Vue会默认使用节点的索引作为key值。如果数据项的顺序发生了变化，那么列表中的元素就会重新排序。这可能会导致一些本不需要更新的元素被重新渲染，从而造成不必要的DOM操作，降低性能。

如果我们使用对象的索引作为key值，那么当我们对列表进行排序或筛选时，也会遇到相同的问题。由于索引没有代表性，DOM元素会乱序、重复渲染，影响到用户的交互体验。

解决方法：使用唯一的标识符作为key值

我们可以使用唯一的标识符作为key值。在通常情况下，我们使用行数据的ID作为key值，这可以很好地避免更新DOM元素时出现错误。如果数据项没有ID属性，则可以使用其他独一无二的标识符作为key值，如名称、日期或任何其他符合我们需求的属性。最终，我们需要确保key值在整个列表范围内都是唯一的。