当前位置: 首页 > 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;…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...