中创建一个
优化
根据
div 来作为
root ，再在
root 中编写描述这个
.vue 文件的
html 标签。当然，你也可以直接写
render() 函数。在文章的开始，我们也说了在
Vue 中无论是写
template 还是
render ，它最终会转成
render() 函数。而平常开发中，我们用
template 的方式会较多。所以，这个过程就需要
Vue 来编译
template 。编译
template 的这个过程会是这样：根据
template 生成
AST （抽象语法树）优化
AST ，即对
AST 节点进行静态节点或静态根节点的判断，便于之后
patch 判断根据
AST 可执行的函数，在
Vue 中针对这一阶段定义了很多
_c 、
_l 之类的函数，就其本质它们是对
render() 函数的封装这三个步骤在源码中的定义：
export const createCompiler = createCompilerCreator(function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
// 生成 AST
const ast = parse(template.trim(), options)
if (options.optimize !== false) {
// 优化 AST
optimize(ast, options)
}
// 生成可执行的函数
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
})需要注意的是
Vue-CLI 提供了两个版本，
Runtime-Compiler 和
Runtime ，两者的区别，在于前者可以将
template 编译成
render() 函数，但是后者必须手写
render() 函数而对于开发中，如果你写了多个
