一、目的
模版编译的目的就是将模版template转换成渲染函数render
AST: 对象形式描述的树形代码结构
- 模板编译是将字符串模板转换成AST对象
- 优化AST对象,过程是标记静态根节点
- 优化好的AST转换成字符串形式代码,之后通过newFunction转换成方法
- 这方法就是最终的render函数
一、入口函数compileToFunctions(template, ...)
- 位置
src/platforms/web/entry-runtime-with-compiler.js
/**
* 把模版编译成render函数
* @param {*}
* @return {*}
*/
Vue.prototype.$mount = function (
...
// 把 template 转换成 render 函数
const { render, staticRenderFns } = compileToFunctions(template, {
...
}, this)
...
// 调用 mount 方法,渲染 DOM
return mount.call(this, el, hydrating)
}
- 调用
createCompiler(baseOpt