Vue 模板编译原理

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

定义:

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

过程:

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

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

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

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

相关推荐
zyseo81 分钟前
谷歌SEO 内容更新焕新流程:让老页面重新起量
java·前端·javascript
Oiiouui10 分钟前
关于 Logto 登录系统的体验以及建议
javascript·安全·react
夜雪一千12 分钟前
标题特殊符号数据清洗实战:解决HTML实体、零宽字符、Emoji乱码踩坑
前端·html
richdata24 分钟前
从采购承诺到库存周转:降低库存资金占用的六个计划杠杆
大数据·前端·javascript
计算机魔术师1 小时前
别人IPO发股票,Anthropic一口气搞出五类
前端
ai_coder_ai1 小时前
使用Web IDE边写自动化脚本
运维·前端·自动化
贾伟康2 小时前
【共创稿事节】一个 UserDataManager 管八类数据:Preferences 持久化的克制用法
java·服务器·前端·harmonyos·arkts·鸿蒙
卓豪终端管理2 小时前
【无标题】
java·服务器·前端
修炼的dance2 小时前
一条命令查清 WebM 有没有透明通道,默认解码会骗你
前端
小灰灰搞电子2 小时前
Rust+Slint 实现动态流光边框源码分享
开发语言·前端·rust·流光边框