当前位置： 首页 > news >正文

Vue - 虚拟DOM的简单理解

news 2026/3/30 11:28:50

目录

    • 虚拟DOM
    • 虚拟DOM树生成流程

因为直接操作真实的 DOM 会比较影响效率。所以 vue 使用了 虚拟DOM（VNode）来描述要渲染的内容。

虚拟DOM

它是一个 js 对象，比如：

const vnode = {tag: "h1",children: [{ tag: undefined, text: "Hello World"}]
}

另外 vue 的模板也不是真实 DOM，它会被编译为渲染函数render：用来返回虚拟 DOM 树的函数。

<div id="app"><h1>第一个vue应用：{{title}}</h1><p>描述：{{author}}</p>
</div>

render 函数执行会返回类似下面的结构（虚拟 DOM 树），并基于它创建实际的 DOM 节点。

{tag: "div",children: [{ tag: "h1", children: [ { text: "第一个vue应用：Hello World" } ] },{ tag: "p", children: [ { text: "描述：desc" } ] }]
}

当依赖数据发生变化后，会引发重新渲染。vue 会比较新旧 VNode tree 并找出差异，仅把差异部分（必要的更新）应用到真实的 DOM 树中。

所以，在 vue 中要得到最终的页面，必须先生成一个虚拟DOM树。逻辑如下：

虚拟DOM树生成流程

vue 官网参考

在这里插入图片描述

1，有 render 函数则运行它。

2，否则判断有没有 template 属性，有则将 template 配置做为模板，编译为 render 函数来运行。

3，否则将 el 绑定的DOM元素作为模板，编译为 render 函数来运行。

下面3个例子，渲染结果相同。

举例1，只有 render 函数

<body><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const vm = new Vue({el: "#app",data: {title: "你好 vue",desc: "第一个 vue 应用",},render(h) {return h("div", [h("h1", this.title),h("p", `描述：${this.desc}`),]);},});</script>
</body>

举例2，只有 template 属性

<body><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const vm = new Vue({el: "#app",data: {title: "你好 vue",desc: "第一个 vue 应用",},template: `<div><h1>{{title}}</h1><p>描述：{{desc}}</p></div>`,});</script>
</body>

举例3，使用 el 对应的 outerHTML 作为模板

<body><div id="app"><div><h1>{{title}}</h1><p>描述：{{desc}}</p></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const vm = new Vue({el: "#app",data: {title: "你好 vue",desc: "第一个 vue 应用",},});</script>
</body>

以上。

相关文章：

Vue - 虚拟DOM的简单理解

目录 虚拟DOM虚拟DOM树生成流程 因为直接操作真实的 DOM 会比较影响效率。所以 vue 使用了 虚拟DOM&#xff08;VNode&#xff09;来描述要渲染的内容。 虚拟DOM 它是一个 js 对象&#xff0c;比如&#xff1a; const vnode {tag: "h1",children: [{ tag: undefi…...

编程日记 2023/9/27 1:05:34

TongWeb8下应用忙碌线程监控

问题 &#xff1a; 在系统运行过程中发现TongWeb进程占用CPU过高&#xff0c;需要分析是应用哪里引起的问题。 分析过程(仅限Linux环境)&#xff1a; 1. 通过top命令查看TongWeb的java进程占用的CPU情况。 查看误区&#xff1a;不要以为java进程CPU占到398%就是高&#xff0…...

编程日记 2023/9/27 1:00:30

Docker部署ActiveMQ消息中间件

1、准备工作 docker pull webcenter/activemq:5.14.3 Pwd"/data/software/activemq" mkdir ${Pwd}/data -p2、运行容器 docker run -d --name activemq \-p 61616:61616 \-p 8161:8161 \-v ${Pwd}/data:/opt/activemq/data \-v /etc/localtime:/etc/localtime \--r…...

编程日记 2023/9/27 0:59:29

Python并发执行（未完待续）

python的多进程执行 多进程实现方式一 from multiprocessing import Processdef func1(name):print("测试 %s 多进程" %name)if __name__ "__main__":process_list []for i in range(5):p Process(target func1, args (Python, ))p.start()process_…...

编程日记 2023/9/27 0:58:28

4.一元多项式相乘

题目说明&#xff1a; 要求采用链表形式&#xff0c;求两个一元多项式的乘积&#xff1a;h3 h1*h2。函数原型为&#xff1a;void multiplication( NODE * h1, NODE * h2, NODE * h3 )。 输入&#xff1a; 输入数据为两行&#xff0c;分别表示两个一元多项式。每个一元多项式以…...

编程日记 2023/9/27 0:57:27

Android Gilde获取网络图片显示保存路径并转化为bitmap

为某个按钮或者图片添加点击事件&#xff0c;然后&#xff1a;strImg为图片url地址 &#xff0c;loadDialog只是个提示信息,可以不要这个参数。使用Glide的onResourceReady方法获取到bitmap对象&#xff1a; LoadDialog loadDialognew LoadDialog(); loadDialog.initShow(cont…...

编程日记 2023/9/27 0:56:26

Uts阿里百川旗舰版插件UniApp-X

简介&#xff1a; 此插件为Uts插件&#xff0c;1.0版暂只支持安卓 插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id14771 接入阿里百川安卓旗舰版最新版5.0.1.9&#xff01;支持淘宝授权登录&#xff0c;获取登录用户信息&#xff0c;拉起淘宝&#xff0c;打开商…...

编程日记 2023/9/27 0:55:25

一创聚宽的实盘就要关闭了，有没有好用的实盘平台推荐

挺多的&#xff0c;比较普遍的是QMT和Ptrade&#xff0c;python语言&#xff0c;易上手&#xff0c;通用性好&#xff0c;要说适用性可以考虑Ptrade&#xff0c;问一下你的客户经理有没有&#xff0c;用Ptrade的券商也多&#xff0c;如果之前用一创聚宽你可以无缝切换&#xff…...

编程日记 2023/9/27 0:54:24

全套办公软件Office 2019 mac专业版功能

Microsoft office 2019 Beta for Mac 是一款办公软件套装&#xff0c;它包含常用的办公应用程序&#xff0c;如 Word、Excel、PowerPoint 和 Outlook 等。office 2019 Beta 版本是一个测试版本&#xff0c;旨在让用户提前体验下一个版本的 office 套件&#xff0c;以便用户可以…...

编程日记 2023/9/27 0:53:23

【计算机网络】IP协议

目录 前言 IP协议 基本概念 IP协议格式 分片 16位标识 3位标志与13位片偏移 分片流程 网段划分 网络号和主机号 DHCP协议 CIDR划分方案 特殊的ip地址 ip地址数量限制 私有ip地址与公网ip地址 路由转发 前言 我们前面讲了HTTP/HTTPS协议和TCP/…...

编程日记 2023/9/27 0:50:21

【操作系统笔记九】并发安全问题

用户态抢占和内核态抢占 内核中可以执行以下几种程序&#xff1a; ① 当前运行的进程&#xff1a;陷阱程序&#xff08;系统调用&#xff09; 和 故障程序&#xff08;page fault&#xff09; &#xff0c;进程运行在内核态的时候&#xff0c;其实就是在执行进程在用户态触发的…...

编程日记 2023/9/27 0:49:20

主要文库网站网赚分析

前言 躺赚的方式有很多&#xff0c;最常见的是文档网站。你上传文档后&#xff0c;等别人来下载&#xff0c;然后你就获得收益。这似乎比开直播&#xff0c;写专栏&#xff0c;赚粉丝更轻松&#xff0c;但实际调研发现&#xff0c;情况没那么简单&#xff0c;真正赚到钱的是少…...

编程日记 2023/9/27 0:46:18

“ElementUI实现动态树和动态表格的综合应用“

目录 引言1. ElementUI树1.1 树的基本概念1.2 示例代码和效果展示 2. ElementUI实现动态表格2.1 表格的基本概念2.2 示例代码和效果展示 总结 引言 在前端开发中&#xff0c;动态树和动态表格是常见的功能需求。ElementUI是一套基于Vue.js的组件库&#xff0c;提供了丰富的UI组…...

编程日记 2023/9/27 0:44:16

按键检测|中断检测

一.按键检测 1.硬件原理 当未按下按键时&#xff0c;GPIO_5为低电平&#xff0c;按下按键GPIO_5变为高电平。 根据引脚编号找到引脚名称 根据引脚名称找到引脚编号 裸机程序控制外设 特点&#xff1a;读数据手册、设寄存器值 找出外设有哪些相关寄存器找出外设相关寄存器如何…...

编程日记 2023/9/27 0:43:15

MySQL的执行流程

在聊mysql的执行流程之前&#xff0c;咱们要先聊聊mysql的逻辑架构。 逻辑架构 可以将上图简化为下图 连接层 客服端访问mysql服务器前&#xff0c;要先和mysq建立tcp连接。经过3次握手建立连接成功后&#xff0c;mysql服务器对tcp传输过来的账号密码进行身份认证&#x…...

编程日记 2023/9/27 0:41:13

如何办一份有价值的企业内刊/报纸？向《华为人》学习就够了

前两天有一个朋友联系华研荟&#xff0c;说他是今年大学毕业加入了一个中型公司&#xff0c;他学的是企业管理&#xff0c;在公司人力资源部门工作。上周老板说公司要办一份自己的内刊&#xff0c;这个工作由人力资源部负责&#xff0c;而人力资源经理就把这个活交给她了。 她…...

编程日记 2023/9/27 0:40:12

C++：从初识到初识的旅程

为什么文章是初识到初识呢&#xff0c;因为我真的仅仅是初识&#xff0c;大学只上了半个学期的C&#xff0c;其他的都是网络课程为主 在我踏入大学校门的那刻&#xff0c;我对于未来充满了无限的好奇和期待。其中&#xff0c;C这门神秘的编程语言进入了我的视线。虽然我的专业…...

编程日记 2023/9/27 0:38:11

JavaWeb 学习

1. 基本概念 1.1 Web web&#xff1a;网络&#xff0c;网页 静态 web html&#xff0c;css提供给所有人看的数据始终不会变化 动态 web 淘宝提供给每个人看的数据会有所不同技术栈&#xff1a;Servlet/JSP&#xff0c;ASP&#xff0c;PHP Java 中&#xff0c;动态 web 资…...

编程日记 2023/9/27 0:36:08

百度SEO优化不稳定的原因分析（提升网站排名的稳定性）

百度SEO优化不稳定介绍蘑菇号-www.mooogu.cn SEO不稳定是指网站在搜索引擎中的排名不稳定&#xff0c;随着时间的推移会发生变化。这种情况可能会出现在网站页面结构、内容质量、外链质量等方面存在缺陷或不合理之处。因此&#xff0c;优化SEO非常重要&#xff0c;可以提高网站…...

编程日记 2023/9/27 0:35:07

给你两个集合，要求{A} + {B}

先看题&#xff1a; 看完题后你会觉得&#xff1a;哇&#xff0c;好简单&#xff0c;STL一下就出来啦。 #include <iostream> #include <set>using namespace std;int main() {int n, m;while (cin >> n >> m) {set<int> set_a;for (int i 0;…...

编程日记 2023/9/27 0:33:06

Free-NTFS-for-Mac全功能指南：跨平台文件自由传输的开源解决方案

Free-NTFS-for-Mac全功能指南&#xff1a;跨平台文件自由传输的开源解决方案 【免费下载链接】Free-NTFS-for-Mac Nigate&#xff0c;一款支持苹果芯片的Free NTFS for Mac小工具软件。NTFS R/W for macOS. Support Intel/Apple Silicon now. 项目地址: https://gitcode.com/…...

编程新知 2026/3/30 11:17:40

zteOnu：核心功能全解析与实战指南

zteOnu&#xff1a;核心功能全解析与实战指南 【免费下载链接】zteOnu 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 解锁高级配置&#xff1a;工厂模式激活指南 场景描述 网络管理员在配置中兴光猫时&#xff0c;发现普通用户权限无法修改关键网络参数&…...

编程新知 2026/3/30 11:07:38

Unity序列化为何拒绝多态

一个让无数开发者抓狂的"bug"，其实是一个深思熟虑的设计决策 一、开篇：一个周五下午的惨案 故事从一个看似完美的设计开始。 你正在开发一个RPG游戏的技能系统。你学过面向对象，你知道继承和多态是好东西。于是你写出了这样优雅的代码： [System.Serializable]…...

编程新知 2026/3/30 10:53:24

Blender3mfFormat全链路应用指南：从基础操作到专业级工作流构建

Blender3mfFormat全链路应用指南&#xff1a;从基础操作到专业级工作流构建 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 基础认知&#xff1a;3MF格式与Blender插件体…...

编程新知 2026/3/30 10:28:16

评一个典型的“数学可视化 + 计算机图形学入门”的优秀案例(C++精灵库3D案例)

这份代码和视频展示了一个非常典型的“数学可视化 计算机图形学入门”的优秀案例。它不仅仅是一段能运行的代码&#xff0c;更是一个将抽象数学公式转化为直观视觉艺术的教学演示。 以下是对该程序及视频的多维度评论&#xff1a; 1. 技术实现与图形学原理 这段代码虽然简短…...

编程新知 2026/3/30 9:29:51

Chord - Ink Shadow 一键部署与测试：从零开始的完整链路验证

Chord - Ink & Shadow 一键部署与测试&#xff1a;从零开始的完整链路验证 最近在折腾大模型本地部署&#xff0c;发现了一个挺有意思的镜像&#xff0c;叫 Chord - Ink & Shadow。名字听起来有点神秘&#xff0c;其实它是一个集成了多种功能的智能模型镜像。网上关于…...

编程新知 2026/3/30 8:57:38

Bolts-ObjC终极迁移指南：从1.8.x到1.9.1的平滑升级方案

Bolts-ObjC终极迁移指南&#xff1a;从1.8.x到1.9.1的平滑升级方案 【免费下载链接】Bolts-ObjC Bolts is a collection of low-level libraries designed to make developing mobile apps easier. 项目地址: https://gitcode.com/gh_mirrors/bo/Bolts-ObjC Bolts-ObjC是…...

编程新知 2026/3/30 8:39:29

Jetson Orin上YOLOv8推理慢？手把手教你安装GPU版PyTorch并导出TensorRT引擎

Jetson Orin加速YOLOv8推理&#xff1a;从环境配置到TensorRT引擎优化实战 当你第一次在Jetson Orin上运行YOLOv8时&#xff0c;是否也被那令人窒息的推理速度震惊了&#xff1f;一张图片300多毫秒的处理时间&#xff0c;别说实时视频分析&#xff0c;就连批量处理图片都显得力…...

编程新知 2026/3/30 8:33:27

Qwen3-TTS-1.7B惊艳案例：带背景音乐的语音合成抗干扰能力实测

Qwen3-TTS-1.7B惊艳案例&#xff1a;带背景音乐的语音合成抗干扰能力实测 1. 引言&#xff1a;当AI语音合成遇上背景音乐 想象一下这个场景&#xff1a;你正在制作一个短视频&#xff0c;需要给画面配上解说。你找到了一段完美的背景音乐&#xff0c;但当你尝试录制旁白时&am…...

编程新知 2026/3/30 6:22:50

PS软件插件开发思维：为视频编辑流程注入AI字幕能力

PS软件插件开发思维&#xff1a;为视频编辑流程注入AI字幕能力 不知道你有没有过这样的经历&#xff1a;辛辛苦苦剪完一个视频&#xff0c;到了加字幕这一步&#xff0c;整个人都蔫了。要么是手动敲字敲到手抽筋&#xff0c;要么是自动生成的字幕时间轴对不上&#xff0c;还得…...

编程新知 2026/3/30 5:32:23