支付宝网站开发流程,网页建设,呼市网站制作,外贸网站设计案例Vue template到render过程 vue的模版编译过程主要如下#xff1a;template - ast - render函数#xff08;1#xff09;调用parse方法将template转化为ast#xff08;抽象语法树#xff09;#xff08;2#xff09;对静态节点做优化#xff08;3#xff09;生… Vue template到render过程 vue的模版编译过程主要如下template - ast - render函数1调用parse方法将template转化为ast抽象语法树2对静态节点做优化3生成代码render函数的调用时机 vue的模版编译过程主要如下template - ast - render函数
vue 在模版编译版本的码中会执行 compileToFunctions 将template转化为render函数
// 将模板编译为render函数
const { render, staticRenderFns } compileToFunctions(template,options, this)
CompileToFunctions中的主要逻辑如下∶
1调用parse方法将template转化为ast抽象语法树
constast parse(template.trim(), options)parse的目标把tamplate转换为AST树它是一种用 JavaScript对象的形式来描述整个模板。 解析过程利用正则表达式顺序解析模板当解析到开始标签、闭合标签、文本的时候都会分别执行对应的 回调函数来达到构造AST树的目的。 AST元素节点总共三种类型type为1表示普通元素、2为表达式、3为纯文本
2对静态节点做优化
optimize(ast,options)这个过程主要分析出哪些是静态节点给其打一个标记为后续更新渲染可以直接跳过静态节点做优化
深度遍历AST查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点他们生成的DOM永远不会改变这对运行时模板更新起到了极大的优化作用。
3生成代码
const code generate(ast, options)generate将ast抽象语法树编译成 render字符串并将静态部分放到 staticRenderFns 中最后通过 new Function(“render”) 生成render函数。
render函数的调用时机
在beforeMount生命周期钩子期间调用因为此时模板编译已完成但是为渲染成真实DOM
