Vue源码模板编译解析 vue.js

vue源码模板编译

模板编译的主要目的是将模板(template)转换为渲染函数(render)

模板编译作用

Vue2.x使用VNode描述视图以及各种交互，用户自己编写VNode 比较复杂
用户只需要编写类似 HTML的代码 - Vue.js模板，通过编译器将模板转换为返回 VNode 的 render函数
.vue文件会被webpack在构建的过程中转换成 render函数 (内部通过vue-loader)
运行时版本，vuecli默认使用
构建时版本，体积大，构建速度慢

查看模板编译结果

Vue模板编译{{msg}} Vue.component("comp",{ template:'I am Comp' }) const vm = newVue({ el:"#app", data:{ msg:'Hello Compiler' }, methods:{ handler(){ console.log('test') } } }) console.log(vm.$options.render)

【Vue源码模板编译解析】获取render输出结果

with作用是表示下面_的方法都是vue实例的方法

(function anonymous() { with(this) { return _c( 'div', // tag标签 {attrs:{"id":"app"}}, // data用于描述tag [// children描述tag子节点 _m(0),// 模板中的静态内容，对应上面的h1标签 _v(" "), // 创建空白文本，两个标签之间的空白 _c('p',[_v(_s(msg))]), // 创建p标签对应的vnode，参数二是文本 _v(" "), _c('comp') ], 1 // children 拍平 ) } })
_c() 定义在 src/core/instance/render.js (h函数，用于创建vnode)
_m() / _v() / _s() 定义在 src/core/instance/render-helpers/index.js

将html模板转化为render渲染函数

标签内的内容，空格换行，render会原样输出
去掉无异于的换行空格，可提高性能，减小内存占用
vue3 对应的 explorer对其做了优化，换行空格不会保留

模板编译入口

src/platforms/web/entry-runtime-with-compiler.js

// 把template转化为render 函数 const { render, staticRenderFns } = compileToFunctions(template, { outputSourceRange: process.env.NODE_ENV !== 'production', shouldDecodeNewlines, shouldDecodeNewlinesForHref, delimiters: options.delimiters, comments: options.comments }, this)
此方法在 src/compiler/to-function.js中
会执行 compileToFunctions 中的 compile(template,options) 开始编译
compile 定义在 createCompilerCreator 内，会合并配置选项，调用 baseCompile(template.trim(),finalOptions)
baseCompile 定义在 createCompiler中，是转化的核心
主要做了三件事
- 把template 转化为 ast 语法树对象
- 对 ast 对象进行静态标记，patch 时不对比静态节点差异，直接返回，提高效率
- 把 ast 对象转化为 js对象，把 js 对象通过 createFunction转化成匿名函数
- 解构出来，挂到 vm 实例上，编译过程结束
ast语法树对象入口

此时为添加完静态标记的ast对象

文章图片

此时为转化成的 js 对象,此时的 ast 中标记了 staticProcessed:true 表示以及处理完了

文章图片

export const createCompiler = createCompilerCreator(function baseCompile ( template: string, // 模板 options: CompilerOptions // 合并之后的选项 ): CompiledResult { // 把模板转换成 ast 抽象语法树 // 抽象语法树用于以树的形式，描述代码结构 const ast = parse(template.trim(), options) if (options.optimize !== false) { // 优化抽象语法树 optimize(ast, options) } // 把优化后的抽象语法树转化成字符串形式的 js 代码 const code = generate(ast, options) // 返回 createCompiler对象 return { ast, render: code.render, // 渲染函数 staticRenderFns: code.staticRenderFns // 静态渲染函数，生成静态 VNode 树 } })