Vue 模板编译原理

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

定义:

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

过程:

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

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

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

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

相关推荐
GIS之路22 分钟前
GDAL 读取KML数据
前端
今天不要写bug38 分钟前
vue项目基于vue-cropper实现图片裁剪与图片压缩
前端·javascript·vue.js·typescript
用户47949283569151 小时前
记住这张时间线图,你再也不会乱用 useEffect / useLayoutEffect
前端·react.js
汝生淮南吾在北1 小时前
SpringBoot+Vue养老院管理系统
vue.js·spring boot·后端·毕业设计·毕设
咬人喵喵1 小时前
14 类圣诞核心 SVG 交互方案拆解(附案例 + 资源)
开发语言·前端·javascript
问君能有几多愁~1 小时前
C++ 日志实现
java·前端·c++
咬人喵喵1 小时前
CSS 盒子模型:万物皆是盒子
前端·css
2401_860319522 小时前
DevUI组件库实战:从入门到企业级应用的深度探索,如何快速应用各种组件
前端·前端框架
韩曙亮2 小时前
【Web APIs】元素滚动 scroll 系列属性 ② ( 右侧固定侧边栏 )
前端·javascript·bom·window·web apis·pageyoffset