首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

聊聊Vue.js的template编译的问题

Posted in Javascript onOctober 09, 2017

写在前面

因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。

文章的原地址：https://github.com/answershuto/learnVue。

在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src，希望可以对其他想学习Vue源码的小伙伴有所帮助。

可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。

$mount

首先看一下mount的代码

/*把原本不带编译的$mount方法保存下来，在最后会调用。*/
const mount = Vue.prototype.$mount
/*挂载组件，带模板编译*/
Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 el = el && query(el)

 /* istanbul ignore if */
 if (el === document.body || el === document.documentElement) {
  process.env.NODE_ENV !== 'production' && warn(
   `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
  )
  return this
 }

 const options = this.$options
 // resolve template/el and convert to render function
 /*处理模板templete，编译成render函数，render不存在的时候才会编译template，否则优先使用render*/
 if (!options.render) {
  let template = options.template
  /*template存在的时候取template，不存在的时候取el的outerHTML*/
  if (template) {
   /*当template是字符串的时候*/
   if (typeof template === 'string') {
    if (template.charAt(0) === '#') {
     template = idToTemplate(template)
     /* istanbul ignore if */
     if (process.env.NODE_ENV !== 'production' && !template) {
      warn(
       `Template element not found or is empty: ${options.template}`,
       this
      )
     }
    }
   } else if (template.nodeType) {
    /*当template为DOM节点的时候*/
    template = template.innerHTML
   } else {
    /*报错*/
    if (process.env.NODE_ENV !== 'production') {
     warn('invalid template option:' + template, this)
    }
    return this
   }
  } else if (el) {
   /*获取element的outerHTML*/
   template = getOuterHTML(el)
  }
  if (template) {
   /* istanbul ignore if */
   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    mark('compile')
   }

   /*将template编译成render函数，这里会有render以及staticRenderFns两个返回，这是vue的编译时优化，static静态不需要在VNode更新时进行patch，优化性能*/
   const { render, staticRenderFns } = compileToFunctions(template, {
    shouldDecodeNewlines,
    delimiters: options.delimiters
   }, this)
   options.render = render
   options.staticRenderFns = staticRenderFns

   /* istanbul ignore if */
   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    mark('compile end')
    measure(`${this._name} compile`, 'compile', 'compile end')
   }
  }
 }
 /*Github:https://github.com/answershuto*/
 /*调用const mount = Vue.prototype.$mount保存下来的不带编译的mount*/
 return mount.call(this, el, hydrating)
}

通过mount代码我们可以看到，在mount的过程中，如果render函数不存在（render函数存在会优先使用render）会将template进行compileToFunctions得到render以及staticRenderFns。譬如说手写组件时加入了template的情况都会在运行时进行编译。而render function在运行后会返回VNode节点，供页面的渲染以及在update的时候patch。接下来我们来看一下template是如何编译的。

一些基础

首先，template会被编译成AST语法树，那么AST是什么？

在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。

AST会经过generate得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，具体定义如下：

export default class VNode {
 tag: string | void;
 data: VNodeData | void;
 children: ?Array<VNode>;
 text: string | void;
 elm: Node | void;
 ns: string | void;
 context: Component | void; // rendered in this component's scope
 functionalContext: Component | void; // only for functional component root nodes
 key: string | number | void;
 componentOptions: VNodeComponentOptions | void;
 componentInstance: Component | void; // component instance
 parent: VNode | void; // component placeholder node
 raw: boolean; // contains raw HTML? (server only)
 isStatic: boolean; // hoisted static node
 isRootInsert: boolean; // necessary for enter transition check
 isComment: boolean; // empty comment placeholder?
 isCloned: boolean; // is a cloned node?
 isOnce: boolean; // is a v-once node?
 /*Github:https://github.com/answershuto*/
 
 constructor (
  tag?: string,
  data?: VNodeData,
  children?: ?Array<VNode>,
  text?: string,
  elm?: Node,
  context?: Component,
  componentOptions?: VNodeComponentOptions
 ) {
  /*当前节点的标签名*/
  this.tag = tag
  /*当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息*/
  this.data = data
  /*当前节点的子节点，是一个数组*/
  this.children = children
  /*当前节点的文本*/
  this.text = text
  /*当前虚拟节点对应的真实dom节点*/
  this.elm = elm
  /*当前节点的名字空间*/
  this.ns = undefined
  /*编译作用域*/
  this.context = context
  /*函数化组件作用域*/
  this.functionalContext = undefined
  /*节点的key属性，被当作节点的标志，用以优化*/
  this.key = data && data.key
  /*组件的option选项*/
  this.componentOptions = componentOptions
  /*当前节点对应的组件的实例*/
  this.componentInstance = undefined
  /*当前节点的父节点*/
  this.parent = undefined
  /*简而言之就是是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false*/
  this.raw = false
  /*静态节点标志*/
  this.isStatic = false
  /*是否作为跟节点插入*/
  this.isRootInsert = true
  /*是否为注释节点*/
  this.isComment = false
  /*是否为克隆节点*/
  this.isCloned = false
  /*是否有v-once指令*/
  this.isOnce = false
 }

 // DEPRECATED: alias for componentInstance for backwards compat.
 /* istanbul ignore next */
 get child (): Component | void {
  return this.componentInstance
 }
}

关于VNode的一些细节，请参考VNode节点。

createCompiler

createCompiler用以创建编译器，返回值是compile以及compileToFunctions。compile是一个编译器，它会将传入的template转换成对应的AST树、render函数以及staticRenderFns函数。而compileToFunctions则是带缓存的编译器，同时staticRenderFns以及render函数会被转换成Funtion对象。

因为不同平台有一些不同的options，所以createCompiler会根据平台区分传入一个baseOptions，会与compile本身传入的options合并得到最终的finalOptions。

compileToFunctions

首先还是贴一下compileToFunctions的代码。

/*带缓存的编译器，同时staticRenderFns以及render函数会被转换成Funtion对象*/
 function compileToFunctions (
  template: string,
  options?: CompilerOptions,
  vm?: Component
 ): CompiledFunctionResult {
  options = options || {}

  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production') {
   // detect possible CSP restriction
   try {
    new Function('return 1')
   } catch (e) {
    if (e.toString().match(/unsafe-eval|CSP/)) {
     warn(
      'It seems you are using the standalone build of Vue.js in an ' +
      'environment with Content Security Policy that prohibits unsafe-eval. ' +
      'The template compiler cannot work in this environment. Consider ' +
      'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
      'templates into render functions.'
     )
    }
   }
  }
  /*Github:https://github.com/answershuto*/
  // check cache
  /*有缓存的时候直接取出缓存中的结果即可*/
  const key = options.delimiters
   ? String(options.delimiters) + template
   : template
  if (functionCompileCache[key]) {
   return functionCompileCache[key]
  }

  // compile
  /*编译*/
  const compiled = compile(template, options)

  // check compilation errors/tips
  if (process.env.NODE_ENV !== 'production') {
   if (compiled.errors && compiled.errors.length) {
    warn(
     `Error compiling template:\n\n${template}\n\n` +
     compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
     vm
    )
   }
   if (compiled.tips && compiled.tips.length) {
    compiled.tips.forEach(msg => tip(msg, vm))
   }
  }

  // turn code into functions
  const res = {}
  const fnGenErrors = []
  /*将render转换成Funtion对象*/
  res.render = makeFunction(compiled.render, fnGenErrors)
  /*将staticRenderFns全部转化成Funtion对象 */
  const l = compiled.staticRenderFns.length
  res.staticRenderFns = new Array(l)
  for (let i = 0; i < l; i++) {
   res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i], fnGenErrors)
  }

  // check function generation errors.
  // this should only happen if there is a bug in the compiler itself.
  // mostly for codegen development use
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production') {
   if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
    warn(
     `Failed to generate render function:\n\n` +
     fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n$[code]\n`).join('\n'),
     vm
    )
   }
  }

  /*存放在缓存中，以免每次都重新编译*/
  return (functionCompileCache[key] = res) 
 }

我们可以发现，在闭包中，会有一个functionCompileCache对象作为缓存器。

/*作为缓存，防止每次都重新编译*/
 const functionCompileCache: {
  [key: string]: CompiledFunctionResult;
 } = Object.create(null)

在进入compileToFunctions以后，会先检查缓存中是否有已经编译好的结果，如果有结果则直接从缓存中读取。这样做防止每次同样的模板都要进行重复的编译工作。

// check cache
  /*有缓存的时候直接取出缓存中的结果即可*/
  const key = options.delimiters
   ? String(options.delimiters) + template
   : template
  if (functionCompileCache[key]) {
   return functionCompileCache[key]
  }

在compileToFunctions的末尾会将编译结果进行缓存

/*存放在缓存中，以免每次都重新编译*/
 return (functionCompileCache[key] = res)

 compile

/*编译，将模板template编译成AST树、render函数以及staticRenderFns函数*/
 function compile (
  template: string,
  options?: CompilerOptions
 ): CompiledResult {
  const finalOptions = Object.create(baseOptions)
  const errors = []
  const tips = []
  finalOptions.warn = (msg, tip) => {
   (tip ? tips : errors).push(msg)
  }

  /*做下面这些merge的目的因为不同平台可以提供自己本身平台的一个baseOptions，内部封装了平台自己的实现，然后把共同的部分抽离开来放在这层compiler中，所以在这里需要merge一下*/
  if (options) {
   // merge custom modules
   /*合并modules*/
   if (options.modules) {
    finalOptions.modules = (baseOptions.modules || []).concat(options.modules)
   }
   // merge custom directives
   if (options.directives) {
    /*合并directives*/
    finalOptions.directives = extend(
     Object.create(baseOptions.directives),
     options.directives
    )
   }
   // copy other options
   for (const key in options) {
    /*合并其余的options，modules与directives已经在上面做了特殊处理了*/
    if (key !== 'modules' && key !== 'directives') {
     finalOptions[key] = options[key]
    }
   }
  }

  /*基础模板编译，得到编译结果*/
  const compiled = baseCompile(template, finalOptions)
  if (process.env.NODE_ENV !== 'production') {
   errors.push.apply(errors, detectErrors(compiled.ast))
  }
  compiled.errors = errors
  compiled.tips = tips
  return compiled
 }

compile主要做了两件事，一件是合并option（前面说的将平台自有的option与传入的option进行合并），另一件是baseCompile，进行模板template的编译。

来看一下baseCompile

baseCompile

function baseCompile (
 template: string,
 options: CompilerOptions
): CompiledResult {
 /*parse解析得到ast树*/
 const ast = parse(template.trim(), options)
 /*
  将AST树进行优化
  优化的目标：生成模板AST树，检测不需要进行DOM改变的静态子树。
  一旦检测到这些静态树，我们就能做以下这些事情：
  1.把它们变成常数，这样我们就再也不需要每次重新渲染时创建新的节点了。
  2.在patch的过程中直接跳过。
 */
 optimize(ast, options)
 /*根据ast树生成所需的code（内部包含render与staticRenderFns）*/
 const code = generate(ast, options)
 return {
  ast,
  render: code.render,
  staticRenderFns: code.staticRenderFns
 }
}

baseCompile首先会将模板template进行parse得到一个AST语法树，再通过optimize做一些优化，最后通过generate得到render以及staticRenderFns。

parse

parse的源码可以参见https://github.com/answershuto/learnVue/blob/master/vue-src/compiler/parser/index.js#L53。

parse会用正则等方式解析template模板中的指令、class、style等数据，形成AST语法树。

optimize

optimize的主要作用是标记static静态节点，这是Vue在编译过程中的一处优化，后面当update更新界面时，会有一个patch的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能。

generate

generate是将AST语法树转化成render funtion字符串的过程，得到结果是render的字符串以及staticRenderFns字符串。

至此，我们的template模板已经被转化成了我们所需的AST语法树、render function字符串以及staticRenderFns字符串。

举个例子

来看一下这段代码的编译结果

<div class="main" :class="bindClass">
  <div>{{text}}</div>
  <div>hello world</div>
  <div v-for="(item, index) in arr">
    <p>{{item.name}}</p>
    <p>{{item.value}}</p>
    <p>{{index}}</p>
    <p>---</p>
  </div>
  <div v-if="text">
    {{text}}
  </div>
  <div v-else></div>
</div>

转化后得到AST树，如下图：

聊聊Vue.js的template编译的问题

我们可以看到最外层的div是这颗AST树的根节点，节点上有许多数据代表这个节点的形态，比如static表示是否是静态节点，staticClass表示静态class属性（非bind:class）。children代表该节点的子节点，可以看到children是一个长度为4的数组，里面包含的是该节点下的四个div子节点。children里面的节点与父节点的结构类似，层层往下形成一棵AST语法树。

再来看看由AST得到的render函数

with(this){
  return _c( 'div',
        {
          /*static class*/
          staticClass:"main",
          /*bind class*/
          class:bindClass
        },
        [
          _c( 'div', [_v(_s(text))]),
          _c('div',[_v("hello world")]),
          /*这是一个v-for循环*/
          _l(
            (arr),
            function(item,index){
              return _c( 'div',
                    [_c('p',[_v(_s(item.name))]),
                    _c('p',[_v(_s(item.value))]),
                    _c('p',[_v(_s(index))]),
                    _c('p',[_v("---")])]
                  )
            }
          ),
          /*这是v-if*/
          (text)?_c('div',[_v(_s(text))]):_c('div',[_v("no text")])],
          2
      )
}

_c，_v，_s，_q

看了render function字符串，发现有大量的_c，_v，_s，_q，这些函数究竟是什么？

带着问题，我们来看一下core/instance/render。

/*处理v-once的渲染函数*/
 Vue.prototype._o = markOnce
 /*将字符串转化为数字，如果转换失败会返回原字符串*/
 Vue.prototype._n = toNumber
 /*将val转化成字符串*/
 Vue.prototype._s = toString
 /*处理v-for列表渲染*/
 Vue.prototype._l = renderList
 /*处理slot的渲染*/
 Vue.prototype._t = renderSlot
 /*检测两个变量是否相等*/
 Vue.prototype._q = looseEqual
 /*检测arr数组中是否包含与val变量相等的项*/
 Vue.prototype._i = looseIndexOf
 /*处理static树的渲染*/
 Vue.prototype._m = renderStatic
 /*处理filters*/
 Vue.prototype._f = resolveFilter
 /*从config配置中检查eventKeyCode是否存在*/
 Vue.prototype._k = checkKeyCodes
 /*合并v-bind指令到VNode中*/
 Vue.prototype._b = bindObjectProps
 /*创建一个文本节点*/
 Vue.prototype._v = createTextVNode
 /*创建一个空VNode节点*/
 Vue.prototype._e = createEmptyVNode
 /*处理ScopedSlots*/
 Vue.prototype._u = resolveScopedSlots

 /*创建VNode节点*/
 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)

通过这些函数，render函数最后会返回一个VNode节点，在_update的时候，经过patch与之前的VNode节点进行比较，得出差异后将这些差异渲染到真实的DOM上。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

聊聊Vue.js的template编译的问题

- Author -

染陌同学

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 #Javascript
Angular2监听页面大小变化的解决方法
Oct 09 #Javascript
JS实现预加载视频音频/视频获取截图（返回canvas截图）
Oct 09 #Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 #Javascript
详解使用Typescript开发node.js项目（简单的环境配置）
Oct 09 #Javascript
JS中Attr的用法详解
Oct 09 #Javascript
移动端效果之Swiper详解
Oct 09 #Javascript
Spring Bean(1) Switch(1) REST(1) EditText(1) Django(9) cmd(1) 远程桌面(2) TextInputLayout(1) Spring JPA(1) openEuler(1)
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
mysql_connect localhost和127.0.0.1的区别（网络层阐述）
2015/03/26 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JavaScript高级程序设计（第3版）学习笔记10 再访js对象
2012/10/11 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
BootStrap中的模态框（modal，弹出层）功能示例代码
2018/11/02 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue实现图片上传功能
2020/05/28 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Python的Flask框架与数据库连接的教程
2015/04/20 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python实现XML解析的方法解析
2019/11/16 Python
linux比较文件内容的命令是什么
2015/09/23 面试题
Java中采用什么结构来捕获、处理异常？各子句的顺序、功能如何
2013/10/07 面试题
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
人与自然的观后感
2015/06/18 职场文书
小学英语听课心得体会
2016/01/14 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
深入理解Pytorch微调torchvision模型
2021/11/11 Python