vuejs源码之模版编译原理

之前我们说过虚拟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函数实现的,源码是在下面这个位置。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ES6基础知识八:你是怎么理解ES6中Proxy的?使用场景?

一、介绍 定义&#xff1a; 用于定义基本操作的自定义行为 本质&#xff1a; 修改的是程序默认形为&#xff0c;就形同于在编程语言层面上做修改&#xff0c;属于元编程(meta programming) 元编程&#xff08;Metaprogramming&#xff0c;又译超编程&#xff0c;是指某类计算…

.360勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

引言&#xff1a; 近年来&#xff0c;随着互联网的普及和信息技术的快速发展&#xff0c;网络安全问题日益严峻。其中&#xff0c;勒索病毒成为网络安全领域的一大威胁。本文91数据恢复将重点介绍一种名为“.360勒索病毒”的恶意软件&#xff0c;并探讨被该病毒加密的数据文件…

quartus工具篇——PLL IP核的使用

quartus工具篇——PLL IP核的使用 1、PLL简介 PLL(Phase-Locked Loop,相位锁环)是FPGA中非常重要的时钟管理单元,其主要功能包括: 频率合成 - PLL可以生成比输入时钟频率高的时钟信号。频率分频 - PLL也可以输出分频后的较低频率时钟。减小时钟抖动 - PLL可以过滤输入时钟中…

踩坑 视觉SLAM 十四讲第二版 ch8 编译及运行问题

1.fmt相关 CMakeLists.txt中&#xff1a;在后面加上 fmt target_link_libraries(optical_flow ${OpenCV_LIBS} fmt ) target_link_libraries(direct_method ${OpenCV_LIBS} ${Pangolin_LIBRARIES} fmt )2.不存在用户定义的从 "std::_Bind<void (OpticalFlowTracker::…

架构重构实践心得

一、前言 大多数的技术研发都对重构有所了解&#xff0c;而每个研发又都有自己的理解。从代码重构到架构重构&#xff0c;我参与了携程大型全链路重构项目&#xff0c;积累了一点经验心得&#xff0c;在此抛砖引玉和大家分享。 二、重构的定义 重构是指在不改变外部行为的情…

改进的北方苍鹰算法优化VMD参数,最小包络熵、样本熵、信息熵、排列熵(适应度函数可自行选择,一键修改)包含MATLAB源代码...

今天给大家带来一期由改进的北方苍鹰算法(SCNGO)优化VMD的两个参数。 同样以西储大学数据集为例&#xff0c;选用105.mat中的X105_BA_time.mat数据中1000个数据点。没有数据的看这篇文章。西储大学轴承诊断数据处理&#xff0c;matlab免费代码获取 选取四种适应度函数进行优化&…

信息安全运维经验

1.备份系统 国外主流&#xff1a;veritas NetBackUp&#xff08;NBU&#xff09;、IBM&#xff08;TSM&#xff09; (191条消息) 【大数据-文摘笔记】Veritas NBU简介_weixin_30501857的博客-CSDN博客 虚拟机玩转 Veritas NetBackup&#xff08;NBU&#xff09;之服务端安装…

【云计算小知识】云环境是什么意思?有什么优点?

随着云计算的快速发展&#xff0c;了解云计算相关知识也是运维人员必备的。那你知道云环境是什么意思&#xff1f;有什么优点&#xff1f;云环境安全威胁有哪些&#xff1f;如何保证云环境的运维安全&#xff1f;这里我们就来简单聊聊。 云环境是什么意思&#xff1f; 云环境是…

水环境综合治理监测系统:筑牢城市水生态安全屏障

水是生命之源&#xff0c;是人类赖以生存的基础。然而&#xff0c;随着工业化、城市化的快速发展&#xff0c;水污染问题日益凸显&#xff0c;给居民的环境卫生以及用水安全带来了巨大的威胁。因此&#xff0c;加强水环境综合治理&#xff0c;保护水资源和维护生态平衡&#xf…

微信小程序导入微信地址

获取用户收货地址。调起用户编辑收货地址原生界面&#xff0c;并在编辑完成后返回用户选择的地址。 1&#xff1a;原生微信小程序接口使用API&#xff1a;wx.chooseAddress(OBJECT) wx.chooseAddress({success (res) {console.log(res.userName)console.log(res.postalCode)c…

一篇文章搞定《APP的启动流程》

一篇文章搞定《APP的启动流程》 前言冷启动、温启动、热启动启动中的重要成员简介zygote进程InstrumentationSystemServer进程ActivityManagerServiceBinderActivityThread 启动的步骤详解一、点击桌面图标二、创建进程三、初始化APP进程四、APP进程与System_server的绑定五、初…

【软件架构】企业架构4A定义

文章目录 前言战略、BA、DA、AA、TA五者的关系1、业务架构&#xff08;BA&#xff09;2、数据架构&#xff08;DA&#xff09;3、应用架构&#xff08;AA&#xff09;4、技术架构&#xff08;TA&#xff09;总结 前言 业务架构是跨系统的业务架构蓝图&#xff0c;应用架构、数…

【Nodejs】nodejs内置模块(中)

1.路劲处理模块 path 1.1 模块概览 在nodejs中&#xff0c;path是个使用频率很高&#xff0c;但却让人又爱又恨的模块。部分因为文档说的不够清晰&#xff0c;部分因为接口的平台差异性。将path的接口按照用途归类&#xff0c;仔细琢磨琢磨&#xff0c;也就没那么费解了。 1.…

Python基于PyTorch实现卷积神经网络分类模型(CNN分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 卷积神经网络&#xff0c;简称为卷积网络&#xff0c;与普通神经网络的区别是它的卷积层内的神经元只覆…

FUNBOX_1靶场详解

FUNBOX_1靶场复盘 这个系列的靶场给出的干扰因素都挺多的&#xff0c;必须从中找到有用的线索才可以。 这个靶场你扫描到ip地址后打开网页会发现&#xff0c;ip自动转换成域名了&#xff0c;所以我们需要添加一条hosts解析才可以。 192.168.102.190 funbox.fritz.box从目录…

vue中预览静态pdf文件

方法 // pdf预览 viewFileCompare() { const pdfUrl "/static/wjbd.pdf"; window.open(pdfUrl); }, // 下载 downloadFile(){ var a document.createElement("a"); a.href "/static/wjbd.pdf"; a.…

自学网络安全(黑客),遇到问题怎么解决

自学网络安全很容易学着学着就迷茫了&#xff0c;找到源头问题&#xff0c;解决它就可以了&#xff0c;所以首先咱们聊聊&#xff0c;学习网络安全方向通常会有哪些问题&#xff0c;看到后面有惊喜哦 1、打基础时间太长 学基础花费很长时间&#xff0c;光语言都有几门&#xf…

专项练习-1数据结构-02字符串

1. 下面关于「串」的叙述中&#xff0c;哪一个是不正确的&#xff1f;&#xff08; &#xff09; A 串是字符的有限序列 B 空串是由空格构成的串 C 模式匹配是串的一种重要运算 D 串既可以采用顺序存储&#xff0c;也可以采用链式存储 正确答案&#xff1a;B 官方解析&…

如何在3ds max中创建可用于真人场景的巨型机器人:第 1部分

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 创建主体 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 在左侧视口中&#xff0c;按键盘上的 Alt-B 键。它 打开视口配置窗口。 打开“锁定缩放/平移”和“匹配位图”选项。单击“文件”并转到参考 …

实验二十四、滞回比较器电压传输特性的测量

一、题目 滞回比较器电压传输特性的测量。 二、仿真电路 电路如图1所示。 为便于观察电压传输特性的变化&#xff0c;输入信号采用信号发生器产生的幅值为 10 V 10\,\textrm V 10V、频率为 20 Hz 20\,\textrm{Hz} 20Hz 的三角波电压。采用虚拟的运算放大电路&#xff0c;其…