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

Vue - 虚拟DOM的简单理解

目录

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

TongWeb8下应用忙碌线程监控

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

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…...

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_…...

4.一元多项式相乘

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

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

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

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

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

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

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

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

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

【计算机网络】IP协议

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

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

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

主要文库网站网赚分析

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

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

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

按键检测|中断检测

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

MySQL的执行流程

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

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

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

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

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

JavaWeb 学习

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

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

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

给你两个集合,要求{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;…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...

goreplay

1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具&#xff0c;可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长&#xff0c;测试它所需的工作量也会呈指数级增长。GoRepl…...

统计学(第8版)——统计抽样学习笔记(考试用)

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

未授权访问事件频发,我们应当如何应对?

在当下&#xff0c;数据已成为企业和组织的核心资产&#xff0c;是推动业务发展、决策制定以及创新的关键驱动力。然而&#xff0c;未授权访问这一隐匿的安全威胁&#xff0c;正如同高悬的达摩克利斯之剑&#xff0c;时刻威胁着数据的安全&#xff0c;一旦触发&#xff0c;便可…...