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

相关推荐
古一|2 分钟前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda74 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH16 分钟前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金3904126 分钟前
flutter 仿商场_首页
前端
少卿27 分钟前
react-native图标替换
前端·react native
熊猫钓鱼>_>32 分钟前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
敲敲敲敲暴你脑袋34 分钟前
Canvas绘制自定义流动路径
vue.js·typescript·canvas
JYeontu1 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_1 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放1 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app