Vue中模板编译原理？

如何将template转换成render函数(这里要注意的是我们在开发时尽量不要使用template，因为将template转化成render方法需要在运行时进行编译操作会有性能损耗，同时引用带有complier包的vue体积也会变大) 默认.vue文件中的 template处理是通过vue-loader 来进行处理的并不是通过运行时的编译。

1) 将 template 模板转换成 ast 语法树 - parserHTML

2) 对静态语法做静态标记 - markUp

3) 重新生成代码 - codeGen

补充回答：

模板引擎的实现原理就是new Function + with来进行实现的。

vue-loader中处理template属性主要靠的是vue-template-compiler

vue-loader

// template => ast => codegen => with+function 实现生成render方法 

let {ast, render } = VueTemplateCompiler.compile(`<div>{{aaa}}</div>`)

console.log(ast, render)

// 模板引擎的实现原理 with + new Function

console.log(new Function(render).tostring())

// render方法执行完毕后生成的是虚拟 dom

// with(this){return _c('div',[_s(aaa)])}

// 代码生成

源码设置：

const ast = parse(template.trim(), options) // 将代码解析成ast语法树

  if (options.optimize !== false) {

    optimize(ast, options) // 优化代码 标记静态点 标记树

  }

  const code = generate(ast, options) // 生成代码 

欢迎大家关注小编前端专栏学习更多技术知识！