Vue template到render过程,以及render的调用时机

Vue template到render过程

vue的模版编译过程主要如下:template -> ast -> render函数

vue 在模版编译版本的码中会执行 compileToFunctions 将template转化为render函数:

javascript 复制代码
// 将模板编译为render函数
const { render, staticRenderFns } = compileToFunctions(template,options, this)

CompileToFunctions中的主要逻辑如下∶

(1)调用parse方法将template转化为ast(抽象语法树)

javascript 复制代码
constast = parse(template.trim(), options)

parse的目标:把tamplate转换为AST树,它是一种用 JavaScript对象的形式来描述整个模板。

解析过程:利用正则表达式顺序解析模板,当解析到开始标签、闭合标签、文本的时候都会分别执行对应的 回调函数,来达到构造AST树的目的。

AST元素节点总共三种类型:type为1表示普通元素、2为表达式、3为纯文本

(2)对静态节点做优化

javascript 复制代码
optimize(ast,options)

这个过程主要分析出哪些是静态节点,给其打一个标记,为后续更新渲染可以直接跳过静态节点做优化

深度遍历AST,查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点,他们生成的DOM永远不会改变,这对运行时模板更新起到了极大的优化作用。

(3)生成代码

javascript 复制代码
const code = generate(ast, options)

generate将ast抽象语法树编译成 render字符串并将静态部分放到 staticRenderFns 中,最后通过 new Function("render") 生成render函数。

render函数的调用时机

在beforeMount生命周期钩子期间调用,因为此时,模板编译已完成,但是为渲染成真实DOM

相关推荐
10年前端老司机23 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js