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

Vue的模板编译过程

news 来源：原创 2025/7/23 21:28:17

👨 作者简介：大家好，我是Taro，全栈领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

文章目录

  • 前言
  • 一、编程范式的分类
    • 1.编程范式分为声明式和命令式
  • 二、vue
    • 1.运行时
    • 2.编译时
    • 3. 运行时+ 编译时
  • 总结

前言

随着业务的不断发展，源码这门技术也越来越重要，很多人都开启了源码学习，本文就介绍了Vue的模板编译过程的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、编程范式的分类

1.编程范式分为声明式和命令式

评价标准：1.性能，2.可维护性

1.性能

命令式 > 声明式

2.可维护性

命令式 <声明式

二、vue

1.运行时 ，2.编译时，3. 运行时+ 编译时

1.运行时

在这里插入图片描述

运行时是利用 render函数 把 vnode 渲染成真实的节点，如果只靠运行时，是无法通过HTML标签结构的方式进行渲染解析的，这个时候就需要借助另外一个东西，也就是 编译时

2.编译时

在这里插入图片描述
对于 编译时 ，则是把 template 中的 html 标签结构编译成为 render 函数，然后再利用运行时 render 进行挂载对应DOM

3. 运行时+ 编译时

在这里插入图片描述

总结

  • ​​编译阶段​​：
    模板 → 渲染函数（虚拟 DOM 生成逻辑）
    优化静态内容（如静态节点提升）
  • 运行阶段​​​​
    执行渲染函数生成虚拟 DOM。
    数据变化时触发 Diff 比对和 DOM 更新。

以上就是今天要讲的内容，本文仅仅简单介绍模板编译的过程。

相关文章：

Vue的模板编译过程

&#x1f468; 作者简介&#xff1a;大家好&#xff0c;我是Taro&#xff0c;全栈领域创作者 ✒️ 个人主页&#xff1a;唐璜Taro &#x1f680; 支持我&#xff1a;点赞&#x1f44d;&#x1f4dd; 评论 ⭐️收藏 文章目录 前言一、编程范式的分类1.编程范式分为声明式和命令…...

编程日记 2025/7/23 21:28:17

空间应用中心AI4S空间科学实验研究成果发表于《中国科学院院刊》

编者寄语&#xff1a; 和鲸基于旗下数据科学协同平台ModelWhale赋能&#xff0c;助力了中国科学院空间应用工程与技术中心系统开展了基于空间科学实验领域的AI4S创新研究。中国科学院空间应用工程与技术中心在空间科学实验领域的研究覆盖了多模态空间科学实验数据模式挖掘、领…...

编程日记 2025/7/4 12:17:07

【Python网络爬虫开发】从基础到实战的完整指南

目录 前言&#xff1a;技术背景与价值当前技术痛点解决方案概述目标读者说明 一、技术原理剖析核心概念图解核心作用讲解关键技术模块技术选型对比 二、实战演示环境配置要求核心代码实现&#xff08;10个案例&#xff09;案例1&#xff1a;基础静态页面抓取案例2&#xff1a;动…...

编程日记 2025/7/21 20:56:13

乐家桌面纯净版刷机ROM下载 乐家桌面纯净版2025官方最新下载

还在苦苦寻找一款好用的电视桌面&#xff0c;为智能电视焕新体验&#xff1f;别在乐家桌面纯净版刷机 ROM 下载和官方最新版下载上纠结啦&#xff0c;试试乐看家桌面&#xff0c;给你带来意想不到的惊喜&#xff01; 乐家桌面纯净版或许曾吸引过你&#xff0c;但乐看家桌面在众…...

编程日记 2025/7/23 4:08:37

深度学习-全连接神经网络

四、参数初始化 神经网络的参数初始化是训练深度学习模型的关键步骤之一。初始化参数&#xff08;通常是权重和偏置&#xff09;会对模型的训练速度、收敛性以及最终的性能产生重要影响。下面是关于神经网络参数初始化的一些常见方法及其相关知识点。 官方文档参考&#xff1…...

编程日记 2025/7/18 20:54:11

n2n 搭建虚拟局域网，实现内网穿透

一、ubuntu linux系统上通过源码安装 1、下载源码 git clone https://github.com/ntop/n2n 2、 进入源码目录n2n&#xff0c;依次执行下列命令 ./autogen.sh # 如果提示命令不存在&#xff0c;需要运行命令&#xff1a;apt-get update && apt-get install autoconf…...

编程日记 2025/7/20 1:59:05

SystemVerilog语法之定宽数组

1.2定宽数组 1.2.1定宽数组的声明和初始化 Verilog要求在声明中必须给出数组的上下界。因为几乎所有数组都使用0作为索引下界&#xff0c;所以SystemVerilog允许只给出数组宽度的便捷声明方式。SystemVerilog的$clog2()函数可以计算以2为底的对数向上舍入值。你可以通过在变量…...

编程日记 2025/7/20 20:45:47

SQL 使用 UPDATE FROM 语法进行更新

UPDATE FROM 是一种常见的 SQL 语法模式&#xff0c;允许你基于其他表的数据来更新目标表。这种语法在不同数据库系统中有所不同&#xff0c;下面我将介绍几种主要数据库的实现方式。 PostgreSQL/SQL Server 语法 UPDATE target_table SET target_column source_table.source…...

编程日记 2025/7/20 16:53:22

如何在LangChain中构建并使用自定义向量数据库

1. 自定义向量数据库对接 向量数据库的发展非常迅速&#xff0c;几乎每隔几天就会出现新的向量数据库产品。LangChain 不可能集成所有的向量数据库&#xff0c;此外&#xff0c;一些封装好的数据库可能存在 bug 或者其他问题。这种情况下&#xff0c;我们需要考虑创建自定义向…...

编程日记 2025/7/22 16:55:51

极狐GitLab Git LFS 速率限制如何设置？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 Git LFS 速率限制 (BASIC SELF) Git LFS (Large File Storage) 是一个用于处理大文件的Git扩展。如果您在仓库中使用 Git LF…...

编程日记 2025/7/18 0:00:40

如何查询IP地址是否被占用？

IP地址占用查询的重要性 在当前高度发达的网络环境下&#xff0c;IP地址作为网络设备间通信的基础&#xff0c;其管理显得尤为重要。IP地址占用查询作为网络管理的一个重要环节&#xff0c;具有以下几点重要性&#xff1a; 预防IP冲突&#xff1a;当两个或多个设备使用相同的I…...

编程日记 2025/7/21 12:35:20

数字后端实现教程 | 时钟树综合IMPCCOPT-1304错误Debug思路和解决方案

今天上午有学员在做公司自己项目CTS时发现跑不下去&#xff0c;报了如下所示的错误IMPCCOPT-4375。 复杂时钟设计时钟树综合(clock tree synthesis)常见20个典型案例 第一次遇到这种错误&#xff0c;其实可以从提示信息上入手。 Term CLK_AVDD_SS is power /ground &#xff…...

编程日记 2025/7/19 20:20:39

AI 大模型在教育革命中的角色重塑：从知识传递者到认知伙伴

📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：从“教”与“学”到“共知”时代的开启 教育的本质是什么？是教师传授知识，学生被动接受？还是引导思维、激发潜能、陪伴成长？ 在过去数百年里，教育形式经历了从口述、印刷、广播到互…...

编程日记 2025/7/18 18:45:43

Spring如何通过XML注册Bean

在上一篇当中我们完成了对三种资源文件的读写 上篇内容&#xff1a;Spring是如何实现资源文件的加载 Test public void testClassPathResource() throws IOException { DefaultResourceLoader defaultResourceLoader new DefaultResourceLoader(); Resource resource …...

编程日记 2025/7/22 9:15:53

Compose Multiplatform Android Logcat工具

一、通过adb发送指令&#xff0c;收集设备日志并保存 二、UI 三、代码 /*** 获取设备列表*/fun getDevices(): List<String> {val process ProcessBuilder("adb", "devices").redirectErrorStream(true).start()val output process.inputStream.…...

编程日记 2025/7/20 5:41:45

智能照明系统：照亮智慧生活的多重价值

在当今科技飞速发展的时代&#xff0c;智能照明系统正以其独特的优势改变着人们的生活和工作方式。这套集成了物联网、人工智能等先进技术的照明解决方案&#xff0c;不仅实现了基本的照明功能&#xff0c;更在节能环保、健康舒适、安全防护等多个维度展现出卓越价值。 从能源管…...

编程日记 2025/7/22 6:19:00

XMC4800 芯片深度解读：架构、特性、应用与开发指南

一、芯片定位与核心优势 XMC4800是英飞凌（Infineon）推出的高性能微控制器（MCU），属于 XMC4000系列，基于 ARM Cortex-M4内核，主打 工业控制、电机驱动、物联网（IoT） 和 嵌入式系统 应用。其核心优势在于： 多核异构处理：集成Cortex-M4（144MHz，带FPU和DSP指令集）与专…...

编程日记 2025/7/17 14:31:32

class com.alibaba.fastjson.JSONObject cannot be cast to class

class com.alibaba.fastjson.JSONObject cannot be cast to class 在做接口测试的时候,携带一个可用的token,打算debug看看代码的执行过程,由于Redis配置类的不完整导致报错 这是原本的Redis配置类 Configuration public class RedisConfig {BeanSuppressWarnings(value {&…...

编程日记 2025/7/7 16:06:13

二叉树操作与遍历实现

二叉树操作与遍历实现 二叉树操作与遍历实现树的相关概念1.树的相关术语2.二叉树的概念3.二叉树的存储结构1.顺序结构2.链式结构 1. 二叉树的创建树的表示1.1 创建节点1.2 构建二叉树 2. 二叉树的销毁3. 二叉树的遍历3.1 前序遍历3.2 中序遍历3.3 后序遍历3.4 层序遍历 4. 二叉…...

编程日记 2025/7/18 23:55:23

VSCode连接服务器跑深度学习代码相关问题（研0大模型学习第八天）

VS Code 远程连接服务器&#xff1a;从环境配置到代码运行与常见问题解决实录 在使用 VS Code 通过 Remote-SSH 连接到远程服务器进行 Python 开发&#xff0c;特别是涉及 Anaconda 环境和深度学习项目时&#xff0c;可能会遇到各种各样的问题。本文记录并解答了我在配置和运行…...

编程日记 2025/7/22 17:32:49

软件工程中的维护类型

目录 前言1. 排错性维护1.1 排错性维护的定义与重要性1.2 排错性维护的实践与挑战 2. 适应性维护2.1 适应性维护的定义与背景2.2 适应性维护的实施策略 3. 完善性维护3.1 完善性维护的定义与目标3.2 完善性维护的实施挑战与技巧 4. 预防性维护4.1 预防性维护的定义与作用4.2 预…...

编程日记 2025/7/23 8:03:07

软件工程（1）

#灵感# 记录一下软件工程的相关基础知识。 按马哲的说法&#xff0c;不能光有实践&#xff0c;也需要相关理论。 定义&#xff1a;软件工程涉及软件开发、维护、管理等多方面的原理、方法、工具和环境。此篇主要讲软件开发中的基本方法。 已知问题&#xff1a;旧的软件开发主要…...

编程日记 2025/7/18 12:02:24

递归的模板 （以反转链表为例）

我们再来回顾一下递归的模板&#xff0c;终止条件&#xff0c;递归调用&#xff0c;逻辑处理。 func reverseList(head *ListNode) *ListNode {// 终止条件if head nil || head.Next nil {return head}// 逻辑处理&#xff08;可能有&#xff0c;也可能没有&#xff0c;具体…...

编程日记 2025/7/19 14:33:13

02-HTML结构

一、URL 1.1.URL的格式 1.2.URL和URI的区别 URI指逻辑或资源的标识符&#xff0c;URL是地址&#xff0c;URL是URI的子集 二、HTML文件结构 2.1.文档声明 默认告诉浏览器是html5页面&#xff0c;必须放在文档最前面 <!DOCTYPE html>2.2.HTML各元素结构 是根元素&…...

编程日记 2025/7/20 12:30:49

C++ vector 核心功能解析与实现

目录 整体结构概述 赋值运算符重载 下标运算符重载 内存管理函数 元素访问函数 插入和删除操作 完整代码 在C标准库中&#xff0c; vector 是一个非常常用的动态数组容器&#xff0c;它能够自动管理内存&#xff0c;并且提供了丰富的操作接口。本文将通过分析一段手写 …...

编程日记 2025/7/23 18:21:26

【Linux网络】构建UDP服务器与字典翻译系统

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…...

编程日记 2025/7/19 1:28:19

DeepSeek 大模型 + LlamaIndex + MySQL 数据库 + 知识文档 实现简单 RAG 系统

DeepSeek 大模型 LlamaIndex MySQL 数据库 知识文档 实现简单 RAG 系统 以下是一个使用 DeepSeek 大模型&#xff08;假设为一个高性能的中文大模型&#xff09;、LlamaIndex、MySQL 数据库 和 知识文档 实现简单 RAG&#xff08;检索增强生成&#xff09;系统的完整示例。该…...

编程日记 2025/7/22 23:12:32

【FFmpeg从入门到精通】第四章-FFmpeg转码

1 FFmpeg 软编码H.264与H.265 当前网络中常见的视频编码格式要数H.264最为火热&#xff0c;支持H.264的封装格式有很多&#xff0c;如FLV、MP4、HLS(M3U8)、MKV、TS等格式;FFmpeg本身并不支持H.264的编码器&#xff0c;而是由FFmpeg的第三方模块对其进行支持&#xff0c;例如x…...

编程日记 2025/7/20 1:20:39

爱普生RX8130CE实时时钟成为智能家居系统的理想解决方案

智能家居的本质是让生活更便捷、舒适与智能&#xff0c;而精准的时间管理是实现这一目标的重要基础。爱普生 RX8130CE 实时时钟&#xff08;RTC&#xff09;以其卓越的性能和丰富的功能&#xff0c;成为智能家居系统的理想时间解决方案&#xff0c;为用户打造更加智能化、人性化…...

编程日记 2025/7/23 4:30:22

Discuz!与DeepSeek的深度融合：打造智能网址导航新标杆

引言 在数字化信息爆炸的时代&#xff0c;网址导航网站作为用户获取优质资源、高效浏览互联网的重要入口&#xff0c;其信息筛选能力、用户体验和商业化潜力成为了决定其竞争力的核心要素。Discuz!作为国内应用广泛的社区论坛系统&#xff0c;以其强大的功能扩展性和用户管理能…...

编程日记 2025/7/20 21:45:31

23种设计模式-结构型模式之代理模式（Java版本）

Java 代理模式&#xff08;Proxy Pattern&#xff09;详解 &#x1f9ed; 什么是代理模式&#xff1f; 代理模式是结构型设计模式之一&#xff0c;为其他对象提供一个代理以控制对这个对象的访问。 就像生活中的“经纪人”&#xff0c;你无法直接联系明星&#xff0c;但可以…...

编程日记 2025/7/20 5:46:33

网络不可达network unreachable问题解决过程

问题&#xff1a;访问一个环境中的路由器172.16.1.1&#xff0c;发现ssh无法访问&#xff0c;ping发现回网络不可达 C:\Windows\System32>ping 172.16.1.1 正在 Ping 172.16.1.1 具有 32 字节的数据: 来自 172.16.81.1 的回复: 无法访问目标网。 来自 172.16.81.1 的回复:…...

编程日记 2025/7/21 14:31:48

@RefreshScope 和@nacosvalue 的区别

文章目录 1. RefreshScope定义与作用工作原理适用场景示例代码 2. NacosValue定义与作用工作原理适用场景示例代码 3. 主要区别4. 如何选择&#xff1f;5. 注意事项 在 Spring 框架中&#xff0c; RefreshScope 和 NacosValue 是两个不同的注解&#xff0c;分别用于不同的场景…...

编程日记 2025/7/16 7:58:58

Oracle EBS R12.2 安装 -- Step by Step

一、引言 在计算机应用已经非常普及的今天，对于绝大部分个人来说，学习并掌握ORACLE ERP系统是一件“实践性”很强的事情，仅仅“纸上谈兵”而不在系统中进行具体的操作，犹如捧着一本“驾驶手册”苦读，但却没有一辆车进行上路演练，是肯定无法学会开车的道理一样，能够为自…...

编程日记 2025/7/15 21:25:28

【JavaEE】计算机的工作原理

计算机系统的组成 一台完整的计算机包含硬件和软件两部分&#xff0c;另外还有一部分固化的软件称为固件&#xff08;兼具软件和硬件的特性&#xff09;&#xff0c;硬件和软件结合才能使计算机正常运行并发挥作用&#xff0c;所以对计算机的理解应该把它看作一个包含软件系统…...

编程日记 2025/7/21 1:24:56

DAY8:Oracle高可用架构深度解析与Data Guard单节点搭建实战

引言 在数据库领域&#xff0c;高可用性&#xff08;High Availability&#xff09;是保障业务连续性的核心要求。Oracle作为企业级数据库的领导者&#xff0c;提供了RAC、Data Guard、GoldenGate三大核心方案。本文将深入剖析这些技术的实现原理&#xff0c;并手把手指导搭建…...

编程日记 2025/7/21 17:36:04

程序的编译（预处理操作）+链接

程序的编译环境和执行环境 翻译环境&#xff1a;在这个环境中源代码被转换成可执行的机器指令 执行环境&#xff1a;用于实际执行代码 详解编译链接 翻译环境 注意&#xff1a; 1.组成一个程序的每个源文件通过编译过程分别转换成目标代码。 2.每个目标文件由链接器捆绑在一…...

编程日记 2025/7/9 17:33:31

Java 实现桌面共享-简单案例

服务器端&#xff08;共享桌面&#xff09; import java.awt.AWTException; import java.awt.Rectangle; import java.awt.Robot; import java.awt.Toolkit; import java.awt.image.BufferedImage; import java.io.DataOutputStream; import java.io.IOException; import java…...

编程日记 2025/7/22 2:29:20

Idea中实用设置和插件

目录 一、Idea使用插件 1.Fitten Code智能提示 2.MyBatisCodeHelperPro 3.HighlightBracketPair‌ 4.Rainbow Brackets Lite 5.GitToolBox（存在付费） 6.MavenHelperPro 7.Search In Repository 8.VisualGC（存在付费） 9.vo2dto 10.Key Promoter X 11.CodeGlance…...

编程日记 2025/7/21 1:25:18

获取电脑信息（登录电脑的进程、C盘文件信息、浏览器信息、IP）

电脑的进程信息 // 获取登录电脑的进程信息String os System.getProperty("os.name").toLowerCase();String command;if (os.contains("win")) {command "tasklist";} else {command "ps -ef";}try {Process process new ProcessB…...

编程日记 2025/7/18 1:09:19

单例模式（线程安全）

1.什么是单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是一种创建型设计模式&#xff0c;旨在确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。这种模式涉及到一个单一的类&#xff0c;该类负责创建自己的对象&#xff0c;同时确保只有单…...

编程日记 2025/7/23 4:20:12

Sentinel源码—7.参数限流和注解的实现二

大纲 1.参数限流的原理和源码 2.SentinelResource注解的使用和实现 2.SentinelResource注解的使用和实现 (1)SentinelResource注解的使用 (2)SentinelResource注解和实现 (1)SentinelResource注解的使用 一.引入Sentinel Spring Boot Starter依赖 <dependency><…...

编程日记 2025/7/14 1:25:58

【单片机 C语言】单片机学习过程中常见C库函数（学习笔记）

memset() ​C 标准库 - <string.h> string .h 头文件定义了一个变量类型、一个宏和各种操作字符数组的函数。 <string.h> 是 C 标准库中的一个头文件&#xff0c;提供了一组用于处理字符串和内存块的函数。这些函数涵盖了字符串复制、连接、比较、搜索和内存操作…...

编程日记 2025/7/19 20:59:15

聚类算法(K-means、DBSCAN)

聚类算法 K-means 算法 算法原理 K-means 是一种基于类内距离最小化的划分式聚类算法&#xff0c;其核心思想是通过迭代优化将数据划分为 K 个簇。目标函数为最小化平方误差&#xff08;SSE&#xff09;&#xff1a; S S E ∑ i 1 K ∑ x ∈ C i ∣ ∣ x − μ i ∣ ∣ 2…...

编程日记 2025/7/18 10:29:58

Spring AI Alibaba Graph基于 ReAct Agent 的天气预报查询系统

1、在本示例中&#xff0c;我们仅为 Agent 绑定了一个天气查询服务&#xff0c;接收到用户的天气查询服务后&#xff0c;流程会在 AgentNode 和 ToolNode 之间循环执行&#xff0c;直到完成用户指令。示例中判断指令完成的条件&#xff08;即 ReAct 结束条件&#xff09;也很简…...

编程日记 2025/7/22 11:07:12

C++初阶——模板

C初阶——模板 一、概念引入 1.如何实现一个通用的交换函数&#xff0c;使它既可以用来交换各种类型的数据呢&#xff1f; 通过前面的学习&#xff0c;我们知道函数重载可以帮我们实现这一功能&#xff0c;代码如下&#xff1a; 运行结果如图&#xff1a; 使用函数重载虽然…...

编程日记 2025/7/22 15:04:41

【技术派后端篇】技术派中基于 Redis 的缓存实践

在互联网应用追求高并发和高可用的背景下&#xff0c;缓存对于提升程序性能至关重要。相较于本地缓存 Guava Cache 和 Caffeine&#xff0c;Redis 具有显著优势。Redis 支持集群和分布式部署&#xff0c;能横向扩展缓存容量和负载能力&#xff0c;适应大型分布式系统的缓存需求…...

编程日记 2025/7/18 8:46:12

系统安装及应用

重点 账号安全控制 系统引导和登陆控制 弱口令检测 端口扫描 前言 随着信息技术的快速发展,系统安全成为我们日常生活和工作中不可或缺的一部分。本章节主要探讨系统安全及应用,涵盖了账号安全控制、系统引导和登录控制、弱口令检测以及端口扫描等多个方面,为我们提供了一…...

编程日记 2025/7/22 2:09:43

发布事件和Insert数据库先后顺序

代码解释 csharp await PublishCreatedAsync(entity).ConfigureAwait(false); await Repository.InsertAsync(entity).ConfigureAwait(false);PublishCreatedAsync(entity)&#xff1a;这是一个异步方法&#xff0c;其功能是发布与实体创建相关的事件。此方法或许会通知其他组…...

编程日记 2025/7/18 18:28:18

【英语语法】词法---冠词

目录 冠词一、不定冠词&#xff1a;a / an1. 基本用法2. 主要使用场景3. 特殊情况 二、定冠词&#xff1a;the1. 基本用法2. 主要使用场景3. 特殊情况 三、零冠词1. 基本规则2. 特殊情况 四、冠词对比五、常见错误总结 冠词 冠词是英语中用于限定名词的一类虚词&#xff0c;分…...

编程日记 2025/7/18 3:58:48