资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/聊聊Vue.js的template编译

聊聊Vue.js的template编译

gnehc / 3303人阅读

摘要：具体可以查看抽象语法树。而则是带缓存的编译器，同时以及函数会被转换成对象。会用正则等方式解析模板中的指令等数据，形成语法树。是将语法树转化成字符串的过程，得到结果是的字符串以及字符串。里面的节点与父节点的结构类似，层层往下形成一棵语法树。

写在前面

因为对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  or  - 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;
  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,
    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:

${template}

` +
          compiled.errors.map(e => `- ${e}`).join("
") + "
",
          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:

` +
          fnGenErrors.map(({ err, code }) => `${err.toString()} in

${code}
`).join("
"),
          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字符串。

举个例子

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


    
{{text}}

    
hello world

    

        
{{item.name}}

        
{{item.value}}

        
{{index}}

        
---

    

    

        {{text}}

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

我们可以看到最外层的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上。

关于

作者：染陌

Email：answershuto@gmail.com or answershuto@126.com

Github: https://github.com/answershuto

Blog：http://answershuto.github.io/

知乎主页：https://www.zhihu.com/people/cao-yang-49/activities

知乎专栏：https://zhuanlan.zhihu.com/ranmo

掘金： https://juejin.im/user/58f87ae844d9040069ca7507

osChina：https://my.oschina.net/u/3161824/blog

转载请注明出处，谢谢。

欢迎关注我的公众号

私有云 混合云 Vue.js vue.js 属性 vue.js自学 cdn vue.js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88922.html

相关文章

  • 前端面试题总结——VUE（持续更新中）

    摘要：前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数，可以让开发者定制化地去处理需求。 前端面试题总结——VUE（持续更新中） 1.active-class是哪个组件的属性？ vue-router模块的router-link组件。 2.嵌套路由怎么定义？ 在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 //引入两个组件 ...

    SimonMa 评论0 收藏0

  • 太原面经分享：如何在vue面试环节，展示你晋级阿里P6+的技术功底？

    摘要：假如你通过阅读源码，掌握了对的实现原理，对生态系统有了充分的认识，那你会在面试环节游刃有余，达到晋级阿里的技术功底，从而提高个人竞争力，面试加分更容易拿。 前言 一年一度紧张刺激的高考开始了，与此同时，我也没闲着，奔走在各大公司的前端面试环节，不断积累着经验，一路升级打怪。 最近两年，太原作为一个准二线城市，各大互联网公司的技术栈也在升级换代，假如你在太原面试前端岗位，而你的技术库里若...

    xiaoqibTn 评论0 收藏0

  • 从template到DOM(Vue.js源码角度看内部运行机制)

    摘要：根据树生成所需的内部包含与首先会将模板进行得到一个语法树，再通过做一些优化，最后通过得到以及。会用正则等方式解析模板中的指令等数据，形成语法树。是将语法树转化成字符串的过程，得到结果是的字符串以及字符串。 写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧，在阅读源码的过程中也确实受益匪...

    Betta 评论0 收藏0

  • 2017-10-09 前端日报

    摘要：前端日报精选传送门浏览器性能优化渲染性能在生产中的使用发送推送第期巧用匿名函数重构你的代码中文可持久化数据结构以及结构分享众成翻译学习笔记的模板学习笔记教程的作用域插槽教程移动助手实践一基于的换肤功能掘金网站压力及性能测试一篇 2017-10-09 前端日报 精选 传送门：React Portal浏览器性能优化-渲染性能在生产中的Progressive Web App使用Service...

    WilsonLiu95 评论0 收藏0

  • Vue不同编译输出文件的区别

    摘要：源码是选用了作为，看的源码时发现对应了不同的构建选项。这也对应了最后打包构建后产出的不同的包。第四种构建方式对应的构建脚本为不同于前面种构建方式这一构建对应于将关于模板编译的成函数的单独进行打包输出。 Vue源码是选用了rollup作为bundler，看Vue的源码时发现：npm script对应了不同的构建选项。这也对应了最后打包构建后产出的不同的包。 不同于其他的library，V...

    awesome23 评论0 收藏0

发表评论

登陆后可评论

0条评论

gnehc

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<