[Vue源码]一起来学Vue模板编译原理（二）-AST生成Render字符串

本文我们一起通过学习Vue模板编译原理（二）-AST生成Render字符串来分析Vue源码。预计接下来会围绕Vue源码来整理一些文章，如下。

  • 一起来学Vue双向绑定原理-数据劫持和发布订阅
  • 一起来学Vue模板编译原理(一)-Template生成AST
  • 一起来学Vue模板编译原理(二)-AST生成Render字符串
  • 一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法

这些文章统一放在我的git仓库：https://github.com/yzsunlei/javascript-series-code-analyzing。觉得有用记得star收藏。

编译过程

模板编译是Vue中比较核心的一部分。关于 Vue 编译原理这块的整体逻辑主要分三个部分，也可以说是分三步，前后关系如下：

第一步：将模板字符串转换成element ASTs（解析器）

第二步：对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）

第三步：使用element ASTs生成render函数代码字符串（代码生成器）

对应的Vue源码如下，源码位置在src/compiler/index.js

export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 1.parse，模板字符串 转换成 抽象语法树(AST)
  const ast = parse(template.trim(), options)
  // 2.optimize，对 AST 进行静态节点标记
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  // 3.generate，抽象语法树(AST) 生成 render函数代码字符串
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

这篇文档主要讲第三步使用element ASTs生成render函数代码字符串，对应的源码实现我们通常称之为代码生成器。

代码生成器运行过程

在分析代码生成器的原理前，我们先举例看下代码生成器的具体作用。

<div>
  <p>{{name}}</p>
</div>

在上节"Template生成AST"中，我们已经说了通过解析器会把上面模板解析成抽象语法树(AST)，解析结果如下：

{
  tag: "div"
  type: 1,
  staticRoot: false,
  static: false,
  plain: true,
  parent: undefined,
  attrsList: [],
  attrsMap: {},
  children: [
    {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
        type: 2,
        text: "{{name}}",
        static: false,
        expression: "_s(name)"
      }]
    }
  ]
}
  • 而在这一节我们会将AST转换成可以直接执行的JavaScript字符串，最终结果如下：
with(this) {
    return _c('div', [_c('p', [_v(_s(name))]), _v(" "), _m(0)])
}

现在看不懂不要紧。其实生成器的过程就是 generate 函数拿到解析好的 AST 对象，递归 AST 树，为不同的 AST 节点创建不同的内部调用方法，然后组合成可执行的JavaScript字符串，等待后面的调用。

内部调用方法

我们看上面示例生成的JavaScript字符串，会发现里面会有_v、_c、_s这样的东西，这些其实就是Vue内部定义的一些调用方法。

其中 _c 函数定义在 src/core/instance/render.js 中。

  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject
  // 定义的_c函数是用来创建元素的
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)

  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

而其他 _s、_v 是定义在 src/core/instance/render-helpers/index.js 中：

export function installRenderHelpers (target: any) {
  target._o = markOnce
  target._n = toNumber
  target._s = toString
  target._l = renderList //生成列表VNode
  target._t = renderSlot //生成解析slot节点
  target._q = looseEqual
  target._i = looseIndexOf
  target._m = renderStatic //生成静态元素
  target._f = resolveFilter
  target._k = checkKeyCodes
  target._b = bindObjectProps //绑定对象属性
  target._v = createTextVNode //创建文本VNode
  target._e = createEmptyVNode //创建空节点VNode
  target._u = resolveScopedSlots
  target._g = bindObjectListeners
  target._d = bindDynamicKeys
  target._p = prependModifier
}

以上都是会在生成的JavaScript字符串中用到的，像比较常用的 _c 执行 createElement 去创建 VNode， _l 对应 renderList 渲染列表；_v 对应 createTextVNode 创建文本 VNode；_e 对于 createEmptyVNode 创建空的 VNode。

整体逻辑

代码生成器的入口函数是generate，具体定义如下，源码位置在src/compiler/codegen/index.js

export function generate (
  ast: ASTElement | void,
  options: CompilerOptions
): CodegenResult {
  // 初始化一些options
  const state = new CodegenState(options)
  // 传入ast和options进行生成
  const code = ast ? genElement(ast, state) : '_c("div")' //重点
  return {
    // 最外层包一个 with(this) 之后返回
    render: `with(this){return ${code}}`,
    // 这个数组中的函数与 VDOM 中的 diff 算法优化相关
    // 那些被标记为 staticRoot 节点的 VNode 就会单独生成 staticRenderFns
    staticRenderFns: state.staticRenderFns
  }
}

生成器入口函数就比较简单，先初始化一些配置options，然后传入ast进行生成，没有ast时直接生成一个空div，最后返回生成的JavaScript字符串和静态节点的渲染函数。这里会把静态节点区分出来，便于后面的Vnode diff，即Vue比较算法更新DOM，现在先略过。

现在我们重点看看genElement函数，代码位置在src/compiler/codegen/index.js

export function genElement (el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre
  }

  if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state) // 静态节点处理生成函数
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)   // v-once处理生成函数
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)    // v-for处理生成函数
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)     // v-if处理生成函数
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    return genChildren(el, state) || 'void 0' // 子节点处理生成函数
  } else if (el.tag === 'slot') {
    return genSlot(el, state)   // slot处理生成函数
  } else {
    // component or element
    let code
    if (el.component) {
      code = genComponent(el.component, el, state)  // component组件处理生成函数
    } else {
      let data
      if (!el.plain || (el.pre && state.maybeComponent(el))) {
        data = genData(el, state)  // attributes节点属性处理生成函数
      }

      const children = el.inlineTemplate ? null : genChildren(el, state, true)
      code = `_c('${el.tag}'${
        data ? `,${data}` : '' // data
      }${
        children ? `,${children}` : '' // children
      })`
    }
    // module transforms
    for (let i = 0; i < state.transforms.length; i++) {
      code = state.transforms[i](el, code)
    }
    return code
  }
}

你会发现genElement函数里面有很多条件判断。这是因为Vue里面的指令写法实在太多，像 v-if 、 v-for 、 v-slot等，每种指令写法都分离出一个函数来单独处理，这样代码阅读起来也清晰明了。下面，我们重点来看看 genFor 和 genData 的具体处理逻辑。

genFor

genFor 函数是用来处理 v-for 指令写法的，源码位置在src/compiler/codegen/index.js

export function genFor (
  el: any,
  state: CodegenState,
  altGen?: Function,
  altHelper?: string
): string {
  const exp = el.for
  const alias = el.alias
  const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
  const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''

  if (process.env.NODE_ENV !== 'production' &&
    state.maybeComponent(el) &&
    el.tag !== 'slot' &&
    el.tag !== 'template' &&
    !el.key
  ) {
    state.warn(
      `<${el.tag} v-for="${alias} in ${exp}">: component lists rendered with ` +
      `v-for should have explicit keys. ` +
      `See https://vuejs.org/guide/list.html#key for more info.`,
      el.rawAttrsMap['v-for'],
      true /* tip */
    )
  }

  el.forProcessed = true // avoid recursion
  return `${altHelper || '_l'}((${exp}),` +
    `function(${alias}${iterator1}${iterator2}){` +
      `return ${(altGen || genElement)(el, state)}` +
    '})'
}

genFor 的逻辑其实就是，首先 AST 元素节点中获取了和 for 相关的一些属性，然后返回了一个代码字符串。

genData

genData 函数是用来处理节点属性的，源码位置在src/compiler/codegen/index.js

export function genData (el: ASTElement, state: CodegenState): string {
  let data = '{'

  // directives first.
  // directives may mutate the el's other properties before they are generated.
  const dirs = genDirectives(el, state)
  if (dirs) data += dirs + ','

  // key
  if (el.key) {
    data += `key:${el.key},`
  }
  // ref
  if (el.ref) {
    data += `ref:${el.ref},`
  }
  if (el.refInFor) {
    data += `refInFor:true,`
  }
  // pre
  if (el.pre) {
    data += `pre:true,`
  }
  // record original tag name for components using "is" attribute
  if (el.component) {
    data += `tag:"${el.tag}",`
  }
  // module data generation functions
  for (let i = 0; i < state.dataGenFns.length; i++) {
    data += state.dataGenFns[i](el)
  }
  // attributes
  if (el.attrs) {
    data += `attrs:${genProps(el.attrs)},`
  }
  // DOM props
  if (el.props) {
    data += `domProps:${genProps(el.props)},`
  }
  // event handlers
  if (el.events) {
    data += `${genHandlers(el.events, false)},`
  }
  if (el.nativeEvents) {
    data += `${genHandlers(el.nativeEvents, true)},`
  }
  // slot target，only for non-scoped slots
  if (el.slotTarget && !el.slotScope) {
    data += `slot:${el.slotTarget},`
  }
  // scoped slots
  if (el.scopedSlots) {
    data += `${genScopedSlots(el, el.scopedSlots, state)},`
  }
  // component v-model
  if (el.model) {
    data += `model:{value:${
      el.model.value
    },callback:${
      el.model.callback
    },expression:${
      el.model.expression
    }},`
  }
  // inline-template
  if (el.inlineTemplate) {
    const inlineTemplate = genInlineTemplate(el, state)
    if (inlineTemplate) {
      data += `${inlineTemplate},`
    }
  }
  data = data.replace(/,$/, '') + '}'
  // v-bind dynamic argument wrap
  if (el.dynamicAttrs) {
    data = `_b(${data},"${el.tag}",${genProps(el.dynamicAttrs)})`
  }
  // v-bind data wrap
  if (el.wrapData) {
    data = el.wrapData(data)
  }
  // v-on data wrap
  if (el.wrapListeners) {
    data = el.wrapListeners(data)
  }
  return data
}

总结一下

代码生成是模板编译的第三步，它完成了AST到Render的转换，即将抽象语法树AST转换成可以直接执行的JavaScript字符串。

其中genElement的代码比较多，因为需要分别处理的情况非常多，这里只是对genFor和genData的代码逻辑进行了说明。

相关

原文地址：https://www.cnblogs.com/yzsunlei/p/12118360.html

时间： 2024-10-15 14:50:57

[Vue源码]一起来学Vue模板编译原理（二）-AST生成Render字符串的相关文章

[Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vue模板编译原理(一)-Template生成AST 一起来学Vue模板编译原理(二)-AST生成Render字符串 一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法 这些文章统一放在我的git仓库:https://github.com/yzsunlei/javascrip

[Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vue模板编译原理(一)-Template生成AST 一起来学Vue模板编译原理(二)-AST生成Render字符串 一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法 这些文章统一放在我的git仓库:https://github.com/yzsun

Vue源码思维导图-------------Vue 初始化

上一节看完<Vue源码思维导图-------------Vue 构造函数.原型.静态属性和方法>,这节将会以new Vue()为入口,大体看下 this._init()要做的事情. 1 function Vue (options) { 2 if (process.env.NODE_ENV !== 'production' && 3 !(this instanceof Vue) 4 ) { 5 warn('Vue is a constructor and should be ca

Vue源码思维导图------------Vue选项的合并之$options

本节将看下初始化中的$options: 1 Vue.prototype._init = function (options?: Object) { 2 const vm: Component = this 3 // a uid 4 vm._uid = uid++ 5 6 // a flag to avoid this being observed 7 vm._isVue = true 8 // merge options 9 if (options && options._isCompon

大白话Vue源码系列(01)：万事开头难

阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的最对脾气的 MVVM 框架.之前也使用过 knockout,angular,react 这些框架,但都没有让咱产生 follow 的冲动.直到见到 Vue,简直是一见钟情啊. Vue 的官方文档已经对 Vue 如何使用提供了最好的教程,建议 Vue 新手直接去官网学习,而不要在网上找些质量参差不齐的

Vue源码探究-虚拟DOM的渲染

Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue 实例后的一般执行流程,首先来看看实例初始化时对渲染模块的初始处理.这也是开始 mount 路径的前一步.初始包括两部分,一是向 Vue 类原型对象上挂载渲染相关的方法,而是初始化渲染相关的属性. 渲染的初始化 下面代码位于vue/src/core/instance/render.js 相关属性初始

[Vue源码分析] v-model实现原理

最近小组有个关于vue源码分析的分享会,提前准备一下- 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么实现这一原理的呢?接下来探索一下这部分的源码. 前期准备①:vue2.5.2源码(用于阅读.查看关联等)②:建立vue demo,创建包含v-model指令的实例(用于debugger)以下为demo: genDirectives在模板的编译阶段, v-model跟其他指令一样,会被解析到 el.d

深入vue - 源码目录及构建过程分析

 公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ?“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整体有一个认知,有助于后续对源码的阅读.” 一.目录结构 上图是对vue的代码的所有目录进行的梳理,其中源码位于src目录下,下面对src下的目录进行介绍. compiler 该目录是编译相关的代码,即将 template 模板转化成 render 函数的代码. vue 提供了 render 函数,r

Vue源码（上篇）

某课网有个488人名币的源码解读视频看不起,只能搜很多得资料慢慢理解,看源码能知道大佬的功能模块是怎么分块写的,怎么复用的,已经vue是怎么实现的 资料来自 vue源码 喜欢唱歌的小狮子 web喵喵喵 Vue.js源码全方位深入解析 恰恰虎的博客 learnVue 最后四集视频 总文件目录 scripts:包含构建相关的脚本和配置文件.作者声明一般开发不需要关注此目录 dist:构建出的不同分发版本,只有发布新版本时才会跟新,开发分支的新特性不会反映在此 packages:包含服务端渲染和模板编