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

Vue - 虚拟DOM的简单理解

news 2025/12/16 12:48:26

目录

    • 虚拟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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/12/15 19:22:53

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/14 0:09:42

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/11/30 23:54:21

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/12/9 1:10:01

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/11/18 6:15:28

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/12/14 0:59:25

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/12/15 17:57:35