Vue中虚拟DOM的原理与作用

news2025/6/9 17:29:17

绪论

首先我们先了解,DOM(Document Object Model,文档对象模型) 是浏览器对 HTML/XML 文档的结构化表示,它将文档解析为一个由节点(Node)和对象组成的树形结构(称为 DOM 树),允许程序(如 JavaScript)动态访问、修改文档的内容、结构和样式。

DOM 的本质是树形结构:
浏览器加载 HTML 后,会将其解析为逻辑上的树状结构,每个 HTML 标签、属性、文本都是一个节点(Node)。具体如下图所示:
在这里插入图片描述
DOM 的作用
动态操作页面:
通过 JavaScript 操作 DOM 节点,实现交互效果(如点击按钮修改文字、新增列表项)。
示例代码:

// 获取元素
const title = document.getElementById("title");

// 修改内容
title.textContent = "新标题"; 

// 添加新节点
const newParagraph = document.createElement("p");
newParagraph.textContent = "新增段落";
document.body.appendChild(newParagraph);

在 Vue 中,虚拟 DOM(Virtual DOM) 是一个核心概念,它是一种用 JavaScript 对象(称为 VNode)模拟真实 DOM 结构的轻量级抽象。其核心作用是优化渲染性能,解决直接操作真实 DOM 带来的效率问题。

一、虚拟 DOM 的工作原理:

  1. 生成虚拟 DOM
    当组件状态(data)变化时,Vue 会重新执行 render 函数,生成一个新的虚拟 DOM 树(由 VNode 节点组成的树形结构)。

  2. Diff 对比
    Vue 会将新旧两棵虚拟 DOM 树进行精细对比(Diff 算法),找出两者之间的最小差异(例如哪些节点需要更新、添加或删除)。

  3. 局部更新真实 DOM
    仅将差异部分应用到真实 DOM 上(这一过程称为 Patch),而非直接替换整个 DOM 树。

状态变化
生成新虚拟 DOM 树
Diff 算法对比新旧树
计算最小变更
局部更新真实 DOM

二、为什么需要虚拟 DOM?

  1. 性能优化

    • 直接操作真实 DOM 成本高昂(浏览器需重排/重绘)。
    • 虚拟 DOM 在内存中操作 JavaScript 对象,速度极快。
    • 批量更新:多次状态变化可合并为一次 DOM 更新。
  2. 跨平台能力

    • 虚拟 DOM 是纯 JavaScript 对象,与平台无关。
    • 同一套代码可渲染到 Web(浏览器 DOM)、移动端(Weex/React Native)或服务端(SSR)。
  3. 声明式编程

    • 开发者只需关注数据逻辑(data),无需手动操作 DOM(如 document.getElementById())。

三、虚拟 DOM 的简单示例

假设一个模板:

<div id="app">
  <p class="text">{{ message }}</p>
</div>

对应的虚拟 DOM 对象(VNode)类似:

{
  tag: 'div',
  attrs: { id: 'app' },
  children: [
    {
      tag: 'p',
      attrs: { class: 'text' },
      children: [ message ] // 动态数据
    }
  ]
}

四、虚拟 DOM 的局限性

  • 内存占用:需额外存储虚拟 DOM 树。
  • 不适用简单场景:对静态页面或极少更新的组件,虚拟 DOM 反而增加开销。
  • 无法完全替代手动优化:极端性能场景仍需手动操作 DOM(如 v-once 或直接使用 ref)。

Vue 中的关键实现:

  • render() 函数:将模板编译为虚拟 DOM。
  • Diff 算法
    • 同级比较(避免跨层级对比)
    • 通过 key 属性复用节点(如 v-for 循环中)
  • Patch 机制:高效更新真实 DOM。

五、总结

特点真实 DOM虚拟 DOM
操作成本高(触发重排/重绘)低(内存操作 JS 对象)
更新方式直接修改Diff + 局部更新
跨平台仅浏览器支持 Web/移动端/服务端
适用场景简单静态页面动态复杂应用

虚拟 DOM 是 Vue 响应式系统的基石,它通过智能的差异对比,在数据变化时以最小代价更新视图,大幅提升复杂应用的性能表现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2405636.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用vue3+ts+input封装上传组件,上传文件显示文件图标

效果图&#xff1a; 代码 <template><div class"custom-file-upload"><div class"upload"><!-- 显示已选择的文件 --><div class"file-list"><div v-for"(item, index) in state.filsList" :key&q…

【Linux】Ubuntu 创建应用图标的方式汇总,deb/appimage/通用方法

Ubuntu 创建应用图标的方式汇总&#xff0c;deb/appimage/通用方法 对于标准的 Ubuntu&#xff08;使用 GNOME 桌面&#xff09;&#xff0c;desktop 后缀的桌面图标文件主要保存在以下三个路径&#xff1a; 当前用户的桌面目录&#xff08;这是最常见的位置&#xff09;。所…

LangGraph--Agent工作流

Agent的工作流 下面展示了如何创建一个“计划并执行”风格的代理。 这在很大程度上借鉴了 计划和解决 论文以及Baby-AGI项目。 核心思想是先制定一个多步骤计划&#xff0c;然后逐项执行。完成一项特定任务后&#xff0c;您可以重新审视计划并根据需要进行修改。 般的计算图如…

Spring Boot 常用注解面试题深度解析

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot 常用注解面试题深度解析一、核心…

Linux系统的CentOS7发行版安装MySQL80

文章目录 前言Linux命令行内的”应用商店”安装CentOS的安装软件的yum命令安装MySQL1. 配置yum仓库2. 使用yum安装MySQL3. 安装完成后&#xff0c;启动MySQL并配置开机自启动4. 检查MySQL的运行状态 MySQL的配置1. 获取MySQL的初始密码2. 登录MySQL数据库系统3. 修改root密码4.…

408第一季 - 数据结构 - 栈与队列

栈 闲聊 栈是一个线性表 栈的特点是后进先出 然后是一个公式 比如123要入栈&#xff0c;一共有5种排列组合的出栈 栈的数组实现 这里有两种情况&#xff0c;&#xff0c;一个是有下标为-1的&#xff0c;一个没有 代码不用看&#xff0c;真题不会考 栈的链式存储结构 L ->…

【RTP】Intra-Refresh模式下的 H.264 输出,RTP打包的方式和普通 H.264 流并没有本质区别

对于 Intra-Refresh 模式下的 H.264 输出,RTP 打包 的方式和普通 H.264 流并没有本质区别:你依然是在对一帧一帧的 NAL 单元进行 RTP 分包,只不过这些 NAL 单元内部有部分宏块是 “帧内编码” 而已。下面分步骤说明: 1. 原理回顾:RFC 6184 H.264 over RTP 按照 RFC 6184 …

Redis实战-消息队列篇

前言&#xff1a; 讲讲做消息队列遇到的问题。 今日所学&#xff1a; 异步优化消息队列基于stream实现异步下单 1. 异步优化 1.1 需求分析 1.1.1 现有下单流程&#xff1a; 1.查询优惠劵 2.判断是否是秒杀时间&#xff0c;库存是否充足 3.实现一人一单 在这个功能中&…

(三)Linux性能优化-CPU-CPU 使用率

CPU使用率 user&#xff08;通常缩写为 us&#xff09;&#xff0c;代表用户态 CPU 时间。注意&#xff0c;它不包括下面的 nice 时间&#xff0c;但包括了 guest 时间。nice&#xff08;通常缩写为 ni&#xff09;&#xff0c;代表低优先级用户态 CPU 时间&#xff0c;也就是进…

佰力博科技与您探讨材料介电性能测试的影响因素

1、频率依赖性 材料的介电性能通常具有显著的频率依赖性。在低频下&#xff0c;偶极子的取向极化占主导&#xff0c;介电常数较高&#xff1b;而在高频下&#xff0c;偶极子的取向极化滞后&#xff0c;导致介电常数下降&#xff0c;同时介电损耗增加。例如&#xff0c;VHB4910…

K8S认证|CKS题库+答案| 4. RBAC - RoleBinding

目录 4. RBAC - RoleBinding 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、查看SA和role 3&#xff09;、编辑 role-1 权限 4&#xff09;、检查role 5&#xff09;、创建 role和 rolebinding 6&#xff0…

React 新项目

使用git bash 创建一个新项目 建议一开始就创建TS项目 原因在Webpack中改配置麻烦 编译方法:ts compiler 另一种 bable 最好都配置 $ create-react-app cloundmusic --template typescript 早期react项目 yarn 居多 目前npm包管理居多 目前pnpm不通用 icon 在public文件夹中…

AI编程在BOSS项目的实践经验分享

前言 在人工智能技术革新浪潮的推动下&#xff0c;智能编程助手正以前所未有的速度重塑开发领域。这些基于AI的代码辅助工具通过智能提示生成、实时错误检测和自动化重构等功能&#xff0c;显著提升了软件工程的全流程效率。无论是初入行业的开发者还是资深程序员&#xff0c;…

数学:”度量空间”了解一下?

度量空间是现代数学中一种基本且重要的抽象空间。以下是对它的详细介绍&#xff1a; 定义 相关概念 常见的度量空间举例 度量空间的类型 度量空间的作用 度量空间是拓扑空间的一种特殊情况&#xff0c;它为拓扑空间的研究提供了具体的模型和实例。同时&#xff0c;度量空间在…

jenkins脚本查看及备份

位置与备份 要完整备份 Jenkins 的所有脚本和相关配置&#xff0c;包括 Jenkinsfile、构建脚本&#xff08;如 .sh / .bat&#xff09;、Job 配置、插件、凭据等&#xff0c;你可以从两个层面入手&#xff1a; ✅ 一、完整备份 Jenkins 主目录&#xff08;最全面&#xff09; …

用电脑通过网口控制keysight示波器

KEYSIGHT示波器HD304MSO性能 亮点: 体验 200 MHz 至 1 GHz 的带宽和 4 个模拟通道。与 12 位 ADC 相比,使用 14 位模数转换器 (ADC) 将垂直分辨率提高四倍。使用 10.1 英寸电容式触摸屏轻松查看和分析您的信号。捕获 50 μVRMS 本底噪声的较小信号。使用独有区域触摸在几秒…

《如何使用MinGW-w64编译OpenCV和opencv_contrib》

《如何使用MinGW-w64编译OpenCV和opencv_contrib》 在Windows环境下使用MinGW编译OpenCV和opencv_contrib是一个常见需求,尤其是对于那些希望使用GCC工具链而非Visual Studio的开发者。下面我将详细介绍这个过程。 准备工作 首先需要安装和准备以下工具和库: MinGW(建议使…

模拟搭建私网访问外网、外网访问服务器服务的实践操作

目录 实验环境 实践要求 一、准备工作 1、准备四台虚拟机&#xff0c;分别标号 2、 防火墙额外添加两块网卡&#xff0c;自定义网络连接模式 3、 关闭虚拟机的图形管理工具 4、关闭防火墙 5、分别配置四台虚拟机的IP地址&#xff0c;此处举一个例子&#xff08;使用的临…

vue中Echarts的使用

文章目录 Echarts概述什么是EchartsEcharts的好处 Vue中Echarts的使用Echarts的安装Echarts的引入 Echarts概述 什么是Echarts Apache ECharts&#xff1a;一个基于 JavaScript 的开源可视化图表库。 其官网如下&#xff1a;https://echarts.apache.org/zh/index.html Echar…

【C++项目】负载均衡在线OJ系统-1

文章目录 前言项目结果演示技术栈&#xff1a;结构与总体思路compiler编译功能-common/util.hpp 拼接编译临时文件-common/log.hpp 开放式日志-common/util.hpp 获取时间戳方法-秒级-common/util.hpp 文件是否存在-compile_server/compiler.hpp 编译功能编写&#xff08;重要&a…