vuejs源码之模版编译原理

news2024/11/23 17:16:04

之前我们说过虚拟dom,也就是虚拟dom拿到vnode后所做的事情,而模版编译是如何让虚拟dom拿到vnode。

模版编译的目标就是生成渲染函数,而渲染函数的作用是每次执行它,它就会使用当前最新的状态生成一份新的vnode,然后用这个vnode进行渲染。

将模版编译成渲染函数

将模版编译成渲染函数可以分为2个步骤,先将模版解析生成AST,也就是抽象语法树,然后再使用AST生成渲染函数。

由于静态节点不用重新渲染,所以生成AST的时候会给静态节点做一个标记,这样在虚拟DOM中更新节点时,如果发现有这个标记,就不会重新渲染它。

解析器

解析器的作用就是将模版解析生成AST。

在解析器内部有很多小解析器,其中包括过滤器解析器,文本解析器和html解析器。

在使用模版时,我们可以使用过滤器,而过滤器解析器的作用就是用来解析过滤器的。

文本解析器就是用来解析带变量的文本。

最重要的就是html解析器,它的作用就是解析模版,每当解析到html标签到开始位置,结束位置,文本或者注释时,都会触发钩子函数,然后将相关信息通过参数传递出来。

优化器

优化器的目标是遍历AST,检测出所有静态子树并给其打上标记。

代码生成器

这个是模版编译的最后一步,它的作用是将AST转换成渲染函数中的内容,这个内容可以称为代码字符串。

比如

<div id="app">
    <p title="berwin" @click="c">1</p>
</div>

生成后的代码字符串是下面这个样子。

with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{attrs:{"title":"berwin"},on:{"click":c}},[_v("1")])])}

里面通过generate函数实现的,源码是在下面这个位置。

生成后的代码字符串导出到外界使用,会将代码字符串放到函数里,这个函数叫做渲染函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/783430.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

========Java基础——小结1========

一、Java 两大版本 Java 主要分为两个版本: Java SE 和Java EE。 Java SE 全称Java Platform Standard Edition&#xff0c;是 Java 的标准版&#xff0c;主要用于桌面应用程序开发&#xff0c;它包含了 Java 语言基础、JDBC (Java 数据库连接)、I/O (输入/输出)、TCP/IP 网络…

【问题记录】Ubuntu 22.04 环境下,程序报:段错误(核心已转储)怎么使用 core 文件和GDB调试器 解决?

目录 环境 问题情况 解决思路 原因分析 解决方法 番外知识 环境 VMware Workstation 16 Pro &#xff08;版本&#xff1a;16.1.2 build-17966106&#xff09;ubuntu-22.04.2-desktop-amd64 问题情况 本人在运行百万并发的服务端程序时&#xff0c;程序运行报&#xff1a…

语音基石模型Speech Foundation Models

语音基石模型&#xff08;Speech Foundation Models&#xff09; 主要包含三部分&#xff1a; 1.语音表示学习&#xff08;Speech representation learning&#xff09; 自监督学习模型&#xff08;Self-suprevised learning, SSL model&#xff09;Representation benchmark…

CMU 15-445 -- Embedded Database Logic - 12

CMU 15-445 -- Embedded Database Logic - 12 引言User-Defined Functions (UDF)SQL FunctionsExternal Programming Language Stored ProceduresStored Procedures 与 UDF 的区别 Database TriggersChange NotificationsUser-Defined Types (UDT)Viewsviews vs select...intov…

区别出过孔的内径、外径、单边孔环、电镀铜厚

自记&#xff1a; 这个参数是啥&#xff1f;下图区别出过孔的内径、外径、单边孔环、电镀铜厚 嘉立创单双面最小过孔内径0.3mm/外径0.6mm&#xff08;极限0.56mm&#xff09;&#xff0c;四、六层最小过孔内径0.2mm/外径0.45mm&#xff08;极限0.40mm&#xff09;&#xff0c;外…

学习day50

自定义指令总结&#xff1a; 一&#xff1a;定义语法&#xff1a; (1)局部指令&#xff1a; new Vue({ directives{指令名&#xff0c;配置对象} }) 或 new Vue({ directives{指令名&#xff0c;回调函数} }) (2)全局对象 Vue.dir…

基于Gym Anytrading 的强化学习简单实例

近年来强化学习(RL)在算法交易领域受到了极大的关注。强化学习算法从经验中学习并基于奖励优化行动使其非常适合交易机器人。在这篇文章&#xff0c;我们将简单介绍如何使用Gym Anytrading环境和GME (GameStop Corp.)交易数据集构建一个基于强化学习的交易机器人。 强化学习是…

【Java从0到1学习】05 Java 数组

1. 数组概述 需求&#xff1a;现在需要统计某公司员工的工资情况&#xff0c;例如计算平均工资、找到最高工资等。假设该公司有80名员工&#xff0c;用前面所学的知识&#xff0c;程序首先需要声明80个变量来分别记住每位员工的工资&#xff0c;然后在进行操作&#xff0c;这样…

MySQL一些知识

六、MySQL命令参数 七、远程登录 use mysql 八、SQL语句和常见的SQL操作 九、数据库和表的创建及插入 指定字段名称&#xff0c;按照表的字段名称顺序写&#xff1a; 指定字段名称&#xff1a; 字段名称可以不全部指定&#xff1a;

SpringBoot(三)

文章目录 前言一.日志的作用二.日志的使用2.1 自定义日志打印三.日志的级别3.1 日志级别的作用3.2 日志级别的分类和使用 四.⽇志持久化 前言 日志在应用程序中扮演着至关重要的角色&#xff0c;它是软件开发、运维和故障排查中不可或缺的工具。无论是大型企业级应用还是小型个…

node插件的安装、HTTP协议

接口测试与UI测试&#xff08;功能测试&#xff0c;UI的自动化测试&#xff09;有什么区别&#xff1f; 1、接口测试更多测试的是客户端与后端之间的交互 2、接口测试也是可以完全的测试产品功能测试场景 UI测试&#xff1a; 1、页面的交互 2、页面的各种提示信息的验证 …

C#栈、List结构的简单搭建

1、栈是一种先进后出的结构&#xff0c;如图&#xff1a; 我们用代码&#xff0c;简单实现一下&#xff1a; public class StackTest<T>{private T[] stack { get; set; }public int length { get; set; }public StackTest(){length 0;stack new T[length];}public vo…

[JVM]String str1 = new String(“yhz“)和 String str2 = “yhz“ 的区别

文章目录 0、前情1、相同之处2、不同之处3、解释前情 0、前情 为什么str1 str2 就返回true&#xff0c;而str1str3 就返回false&#xff1f;先看内存图解释 1、相同之处 String str1new String(“yhz”)和String str2“yhz”&#xff0c;都会先去字符串常量池中查看是否已经存…

Helm KinD kubectl krew Istio急速安装

本篇更新网上许多安装失效的工具&#xff0c;如krew和KinD。 本篇测试使用时间为2023/7/20&#xff0c;基本都为最新版本或最新稳定版本。 前置 Helm 是 Kubernetes 的一个包管理工具&#xff0c;用于简化 Kubernetes 应用的部署和管理。Helm 使用名为 "chart" 的打…

QDialog的两种显示方式

QDialog的两种显示方式 模态显示非模态显示 QDialog不能嵌入到其他窗口中显示&#xff08;无论继承与否&#xff09; 模态显示 d->exec(); 阻塞程序的执行 非模态显示 d->show(); 不阻塞程序

A--玉米大炮--2022河南萌新联赛第(三)场:河南大学

输入 3 3 1 1 2 2 3 3 输出 0 说明 开始时,小蓝控制所有大炮立即发射炮弹,僵王博士受到 666 点伤害,直接被击溃。 示例2 输入 2 20 5 1 5 3 输出 2 说明 开始时,小蓝控制所有大炮立即发射炮弹,僵王博士受到 101010 点伤害, 一秒后一号大炮装填完毕,小蓝控制其攻击僵王…

力扣 -- 152. 乘积最大子数组

一、题目&#xff1a; 题目链接&#xff1a;152. 乘积最大子数组 - 力扣&#xff08;LeetCode&#xff09; 二、解题步骤 下面是用动态规划的思想解决这道题的过程&#xff0c;相信各位小伙伴都能看懂并且掌握这道经典的动规题目滴。 三、参考代码&#xff1a; class Solut…

分布式数据库 Join 查询设计与实现浅析

目录 前言&#xff1a; ①Mysql 分库分表 Join 查询场景 sharding-jdbc Code Insight SQL 路由策略 ②Elasticsearch Join 查询场景 elasticsearch-sql Code Insight ③More Than Join Join 算法 Elasticsearch Nested 类型 前言&#xff1a; 分布式数据库 Join 查…

Unity 2D 针对单个物体的空气墙(能指定物体的碰撞器)

笔者也是废了九牛二虎之力才发现这个API并选择一种相对效率高还简单的实现方法 克服了同层级空气墙的问题 这样可以实现只跟列表里的物体能发生碰撞 在使用之前请确保&#xff1a;空气墙 原本 可以与列表指定的物体发生碰撞 然后本脚本会自动取消列表外的全部碰撞&#xff…

使用spark进行hbase的bulkload

使用spark进行hbase的bulkload 一、 背景 HBase 是一个面向列&#xff0c;schemaless&#xff0c;高吞吐&#xff0c;高可靠可水平扩展的 NoSQL 数据库&#xff0c;用户可以通过 HBase client 提供的 put get 等 api 实现在数据的实时读写。在过去的几年里&#xff0c;HBase …