Vue 模板编译原理

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

定义:

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

过程:

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

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

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

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

相关推荐
杨航 AI10 分钟前
JEV的用法
java·前端·数据库
Amos_Web10 分钟前
Rspack 源码解析(三十五):rspack_error 如何用 miette 渲染带源码定位的错误链
前端
修炼的dance16 分钟前
OCR预处理测了108组,纠斜去噪有用,坑在顺序和力度
前端
独隅18 分钟前
WebStorm Windows 版 React / Next.js 实战替换指南
javascript·windows·webstorm
冷眸_22 分钟前
同名食材不能直接相减:一个 JavaScript 用量模型的边界
javascript
不可能片场25 分钟前
AI视频成片 帧间差分把拼接缝照出来
前端·electron
写的都是BUG25 分钟前
APK 里的钥匙,一直就放在门口:聊聊加固真正该做什么
前端·算法
dpharness27 分钟前
我踩过的四个记忆坑,从预算到换机
前端·后端
ruanno_top30 分钟前
倒计时该用 deadline 还是每秒减一?我把两种写法都跑了一遍
vue.js
apollo_qwe31 分钟前
接口超时了,前端为什么不能直接重试?
javascript·http