模板编译过程

模板编译:(静态根节点:又有子项 又只有字符)

模板字符串—>ast对象(抽象语法树)—>优化ast对象(标记静态根节点)—>转换成字符串形式的代码—>通过newFunction函数转换成匿名函数—>生成render函数
在这里插入图片描述

在这里插入图片描述
compileToFunctions:首先从缓存加载编译好的render渲染函数,如果缓存中没有的话调用compile(template,options)

在这里插入图片描述
在compile函数中,首先去合并选项options。然后调用baseCompile编译模板。
compile函数的核心是合并选项,真正处理是在baseCompile中完成的。把模板和合并好的选项传递给baseCompile。

在这里插入图片描述
baseCompile中核心的三件事:
1.首先用parse()把模板字符串转换成ast对象,即抽象语法树。
2.然后用optimize()对抽象语法树进行优化,标记静态语法书中的所有静态根节点(sub trees)。静态根节点不需要每次被重绘,patch的过程中会跳过静态根节点。
3.最后用genereate()将优化过的ast对象转换成字符串形式的代码。

当compile执行完毕之后,会回到编译的入口函数compileToFunctions

在这里插入图片描述
在compileToFunctions中通过调用createFunction继续把字符串形式的代码转换成函数的形式。当render和staticRenderFns创建完毕,他们都会被挂在到vue实例的options选项对应的属性上。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值