Vue 模板编译原理

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

定义:

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

过程:

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

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

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

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

相关推荐
AI_paid_community8 分钟前
98.5k Star!GitHub官方开源的这个工具,正在把"vibe coding"扫进历史的垃圾桶
javascript·claude
AI_paid_community13 分钟前
用 Claude Code 写了一年代码,装了这 18 个 Skills 之后,我才知道自己一直在"氛围编程"
javascript·面试
parade岁月17 分钟前
开源一个 Vue 3 Table:API 学 antdv、主题学 Nuxt UI
前端·vue.js
JiaWen技术圈21 分钟前
Web 安全深入审计检查清单
前端·安全
江米小枣tonylua30 分钟前
从红绿灯到方向盘:TDD 在 AI 时代的新角色
前端·设计模式·ai编程
祀爱31 分钟前
Asp.net core+ Layui 项目中编辑按钮传递数据的方法
前端·c#·asp.net·layui
DanCheOo1 小时前
Prompt 工程化管理:从散落在代码里到版本化、可测试、可回滚
前端·ai编程
涛涛ing1 小时前
Vue 3.5 下一站:cached 提案,重新定义响应式缓存
前端
胖子不胖1 小时前
svg之viewBox
前端
隔壁老王11111 小时前
浅谈JavaScript内存管理
javascript