Vue 模板编译原理

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

定义:

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

过程:

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

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

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

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

相关推荐
hunterandroid1 分钟前
android方案 : Multiplatform 跨平台开发实战:一套代码,多端运行
android·前端
百度一下吧4 分钟前
CSS3 之后新增的特性:从 CSS4 到现代 CSS 的演进
前端·css·css3
斯内普吖5 分钟前
(开源)校园充电宝租借管理系统实战指南 基于 Java + SSM + Vue + MySQL
java·vue.js·mysql·开源
爱喝热水的呀哈喽9 分钟前
hm探查。
java·前端·人工智能
2603_9658966210 分钟前
JS ES6常用新特性|let/const、解构赋值、展开运算符
前端·javascript·es6
衡石科技19 分钟前
一个门户只保留一个智能助理:衡石嵌入式 Data Agent 的运行与渲染边界
前端·javascript·html·data agent
Hilaku20 分钟前
一个前端工程师除了写代码,还能靠什么赚钱?
前端·javascript·程序员
我先测了22 分钟前
Midscene.js 全栈学习指南:从入门到精通的 AI 视觉自动化框架
javascript·人工智能·自动化·agent·midscene
程序员Sunday30 分钟前
JavaScript 闭包是什么?为什么变量没有被释放,什么时候会内存泄漏?
前端·javascript