【每日一题】【vue2源码学习】VUE中模版编译原理

2021年09月15日 阅读数:1
这篇文章主要向大家介绍【每日一题】【vue2源码学习】VUE中模版编译原理,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

模版指的就是template属性。vue内部会将template字符串转化成render函数进行渲染。render函数返回虚拟节点,再将虚拟节点转化成真实DOM。(模版=>方法=>节点)html

而编译过程就是template转换render函数的过程。vue

如何将template转换成render函数?

  1. 经过正则匹配字符串,将template模版转换成AST语法树 - parserHTML
  2. 对静态语法作静态标记 - markUP
  3. 从新生成代码 - codeGen

⚠️注意:开发时尽可能不要使用template

由于将template转化成render方法须要在运行时进行编译操做,会有性能损耗。同时引用带有compiler包的vue体积也会变大。默认.vue文件中的template处理是经过vue-loader来进行处理的,并非经过运行时的编译。(默认vue项目中引入的vue.js是不带有compiler模块的。)git

vue-template-compiler包

vue-loader的做用就是能够把一个模版变成一个对象。内部用到一个NPM包:《vue-template-compiler》 (插槽、指令等也是用的这个包来处理的,能够本身安装包看下)github

包内VueTemplateCompiler.compile就是用来将模版转化成AST语法树的。web

let {ast, render, staticRenderFns} = VueTemplateCompiler.compile('<div>gjf</div>')

该方法返回结果是一个对象:dom

{
  ast: ast,
  render: code.render, // 将ast语法树格式化成with函数
  staticRenderFns: code.staticRenderFns
}

其中ast就是一颗由对象描述的AST语法树(见下图),该树用来描述template结构。koa

AST语法树:

image
image

render字符串:

由ast生成以下字符串编辑器

with(this){return _c('div',[_v("gjf")])} // _c是建立元素、_v是虚拟节点

最后,new Function + with语句后生成render方法。render方法执行完毕后生成的是虚拟dom。函数

模版引擎的实现原理:

new Function + with语句性能

流程:

template => ast => codegen获得上述字符串 => new Function(render) + with语句生成真正的render方法来执行

总结:

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

原理mock:

模版编译原理

源码位置:

github:src/compiler/index.js:8

// `createCompilerCreator` allows creating compilers that use alternative
// parser/optimizer/codegen, e.g the SSR optimizing compiler.
// Here we just export a default compiler using the default parts.
var createCompiler = createCompilerCreator(function baseCompile (  template,  options ) {  var ast = parse(template.trim(), options); // 将代码解析成ast语法树  if (options.optimize !== false) {  optimize(ast, options); // 优化代码,标记静态节点。核心就是标记树  }  var code = generate(ast, options); // 生成代码  return {  ast: ast,  render: code.render, // 将ast语法树格式化成with函数  staticRenderFns: code.staticRenderFns  } }); 

本文使用 mdnice 排版