Vue 模板编译原理

每日一题: Vue 模板编译原理

定义:

Vue 中的模板 tempalte 无法被浏览器解析并渲染,因为这不属于浏览器的标准,不是正确的 HTML 语法,所以需要将 template 转化成一个 JS 函数,这样浏览器就可以执行这一个函数并渲染出对应的 HTML 元素,就可以让试图跑起来,这是一个转化的过程,就成为模板编译。

过程:

模板编译又分为三个阶段:解析 parse 、优化 optimize ,生成 genertate ,最终生成可执行函数 render

解析阶段:使用大量的正则表达式对 template 字符串进行解析,将标签、指令、属性等转化为抽象语法树 AST

优化阶段:遍历 AST,找到其中的一些静态节点并进行标记,方便在页面重渲染的时候进行 diff 比较时,直接跳过这一些静态节点,优化 runtime 性能

生成阶段:将最终的 AST 转化成 render 函数字符串

相关推荐
weishuangyun14 分钟前
小程序制作平台怎么选?三大平台对比!
大数据·开发语言·javascript
Eric.465 分钟前
毕设实战|SpringBoot+Vue 实现多个系统项目
vue.js·spring boot·课程设计
一颗小芹菜的日常8 分钟前
vue-crack插件是干什么的
前端·javascript·vue.js
小比特-combat11 分钟前
LVGL_1(使用示例讲解父子关系)
开发语言·前端·javascript
IT_陈寒12 分钟前
Java线程池的坑把我埋了,踩出来的血泪教训
前端·人工智能·后端
弯_弯16 分钟前
企业知识库 RAG 落地:从 Demo 到生产,四条工程链路与参数级自查
android·java·javascript
月夏16 分钟前
Node.js 读 Excel 我踩了 3 个坑,最后一个查遍 Stack Overflow 没答案
前端·javascript
亿元程序员18 分钟前
PSD都不用了!Codex直接生成Cocos预制体
前端
柳杉22 分钟前
Codex + 可视化大屏工作流实践:15 个行业场景的设计产出合集
前端·openai·数据可视化
@#¥&~是乱码鱼啦25 分钟前
ArkWeb开发手记05|SPA单页H5适配、自定义历史栈与全局状态同步
前端·harmonyos