阅读 46

Vue(v2.6.14)源码解毒(七):模板编译

在最开始的章节提到过,我们在使用 vue-cli 创建项目的时候,提供了两个版本供我们使用, Runtime Only 版本和 Runtime + Compiler 版本。Runtime Only 版本是不包含编译器的,在项目打包的时候会把模板编译成 render 函数,也叫预编译。Runtime + Compiler 版本包含编译器,可以把编译过程放在运行时做。

入口

这一块代码量比较多,主要是对各种情况做了一些边界处理。这里只关注主流程。对细节感兴趣的伙伴们可以自行去研究。一般我们使用 Runtime + Compiler 版本可能比较多一些,先来找到入口:

// src/platforms/web/entry-runtime-with-compiler.js
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // ...
  if (!options.render) {
    // 模版就绪,进入编译阶段
    if (template) {
      // 编译模版,得到 动态渲染函数和静态渲染函数
      const { render, staticRenderFns } = compileToFunctions(template, {
        // 在非生产环境下,编译时记录标签属性在模版字符串中开始和结束的位置索引
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        // 界定符,默认 {{}}
        delimiters: options.delimiters,
        // 是否保留注释
        comments: options.comments
      }, this)
    }
  }
}
复制代码

compileToFunctions  方法就是把 template  编译而得到 render 以及 staticRenderFns

compileToFunctions

// src/platforms/web/compiler/index.js
import { baseOptions } from './options'
import { createCompiler } from 'compiler/index'

const { compile, compileToFunctions } = createCompiler(baseOptions)

export { compile, compileToFunctions }
复制代码

createCompiler

// src/compiler/index.js
export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 将模版解析为 AST
  const ast = parse(template.trim(), options)
  // 优化 AST,静态标记
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  // 生成渲染函数,,将 ast 转换成可执行的 render 函数的字符串形式
  // code = {
  //   render: `with(this){return ${_c(tag, data, children, normalizationType)}}`,
  //   staticRenderFns: [_c(tag, data, children, normalizationType), ...]
  // }
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})
复制代码

createCompiler 是通过调用 createCompilerCreator 返回的,这里传入了一个 baseCompile 函数作为参数,这个函数是重点,编译的核心过程就是在这个函数中执行的。

createCompilerCreator

// src/compiler/create-compiler.js
export function createCompilerCreator (baseCompile: Function): Function {
  return function createCompiler (baseOptions: CompilerOptions{
    function compile (
      template: string,
      options?: CompilerOptions
    ): CompiledResult {
      // 以平台特有的编译配置为原型创建编译选项对象
      const finalOptions = Object.create(baseOptions)
      const errors = []
      const tips = []
      // 日志,负责记录将 error 和 tip
      let warn = (msg, range, tip) => {
        (tip ? tips : errors).push(msg)
      }
      if (options) {
        if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
          // $flow-disable-line
          const leadingSpaceLength = template.match(/^\s*/)[0].length
          warn = (msg, range, tip) => {
            const data: WarningMessage = { msg }
            if (range) {
              if (range.start != null) {
                data.start = range.start + leadingSpaceLength
              }
              if (range.end != null) {
                data.end = range.end + leadingSpaceLength
              }
            }
            (tip ? tips : errors).push(data)
          }
        }
        // 合并配置项 options 到 finalOptions
        // merge custom modules
        if (options.modules) {
          finalOptions.modules =
            (baseOptions.modules || []).concat(options.modules)
        }
        // merge custom directives
        if (options.directives) {
          finalOptions.directives = extend(
            Object.create(baseOptions.directives || null),
            options.directives
          )
        }
        // copy other options
        for (const key in options) {
          if (key !== 'modules' && key !== 'directives') {
            finalOptions[key] = options[key]
          }
        }
      }
      finalOptions.warn = warn
      // 核心编译函数,传递模版字符串和最终的配置项,得到编译结果
      const compiled = baseCompile(template.trim(), finalOptions)
      if (process.env.NODE_ENV !== 'production') {
        detectErrors(compiled.ast, warn)
      }
      // 将编译期间产生的错误和提示挂载到编译结果上
      compiled.errors = errors
      compiled.tips = tips
      return compiled
    }
    return {
      compile,
      compileToFunctions: createCompileToFunctionFn(compile)
    }
  }
}
复制代码

createCompilerCreator 返回了一个 createCompiler 函数,createCompiler 返回了一个对象,包括了 compilecompileToFunctions ,这个 compileToFunctions 对应的就是 $mount 中调用的 compileToFunctions 方法。在 createCompiler 函数内定义了 compile 方法,并把它传递给 createCompileToFunctionFncompile 主要目的就是对特有平台的配置项做一些合并,如 web 平台和处理一些在编译期间产生的错误。

createCompileToFunctionFn

// src/compiler/to-function.js
export function createCompileToFunctionFn (compile: Function): Function {
  const cache = Object.create(null)
  return function compileToFunctions (
    template: string,
    options?: CompilerOptions,
    vm?: Component
  ): CompiledFunctionResult {
    // 传递进来的编译选项
    options = extend({}, options)
    const warn = options.warn || baseWarn
    delete options.warn
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production') {
      // detect possible CSP restriction
      // 检测可能的 CSP 限制
      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.'
          )
        }
      }
    }
    // check cache
    // 如果有缓存,则跳过编译,直接从缓存中获取上次编译的结果
    const key = options.delimiters
      ? String(options.delimiters) + template
      : template
    if (cache[key]) {
      return cache[key]
    }
    // compile
    // 执行编译函数,得到编译结果
    const compiled = compile(template, options)
    // check compilation errors/tips
    // 检查编译期间产生的 errors/tips,分别输出到控制台
    if (process.env.NODE_ENV !== 'production') {
      if (compiled.errors && compiled.errors.length) {
        if (options.outputSourceRange) {
          compiled.errors.forEach(e => {
            warn(
              `Error compiling template:\n\n${e.msg}\n\n` +
              generateCodeFrame(template, e.start, e.end),
              vm
            )
          })
        } else {
          warn(
            `Error compiling template:\n\n${template}\n\n` +
            compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
            vm
          )
        }
      }
      if (compiled.tips && compiled.tips.length) {
        if (options.outputSourceRange) {
          compiled.tips.forEach(e => tip(e.msg, vm))
        } else {
          compiled.tips.forEach(msg => tip(msg, vm))
        }
      }
    }
    // turn code into functions
    // 转换编译得到的字符串代码为函数,通过 new Function(code) 实现
    const res = {}
    const fnGenErrors = []
    res.render = createFunction(compiled.render, fnGenErrors)
    res.staticRenderFns = compiled.staticRenderFns.map(code => {
      return createFunction(code, 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 (cache[key] = res)
  }
}
复制代码

createCompileToFunctionFn 返回了 compileToFunctions 这个就是我们要找的最终定义所在了,它主要做了这么几件事:

  • 执行编译函数得到编译结果。
  • 将编译得到的字符串代码转换成可执行的函数。
  • 处理异常
  • 缓存

小结

通过以上的代码可以看出真正编译个过程就在 createCompilerCreator 函数传递的 baseCompile 中,主要分为这么几个部分:

  • 将模板解析成 AST
const ast = parse(template.trim(), options)
复制代码
  • 优化 AST (静态标记)
optimize(ast, options)
复制代码
  • 生成代码字符串
const code = generate(ast, options)
复制代码

之所以在真正编译之前做了这么多前戏,目的就是为了对不同平台做一些处理。下面主要针对这三个部分看看做了一些什么事情。

parse

parse 主要作用就是将模板解析成 AST,它是一种抽象语法树。这个过程比较复杂,它会在每个节点的 AST 对象上设置元素的所有信息,比如:父节点、子节点、标签信息、属性信息、插槽信息等等。在期间会用到许多正则表达式对模板进行匹配。

parse

// src/compiler/parser/index.js
export function parse (
  template: string,
  options: CompilerOptions
): ASTElement | void {
  warn = options.warn || baseWarn
  // 是否为 pre 标签
  platformIsPreTag = options.isPreTag || no
  // 必须使用 props 进行绑定的属性
  platformMustUseProp = options.mustUseProp || no
  // 获取标签的命名空间
  platformGetTagNamespace = options.getTagNamespace || no
  // 是否是保留标签(html + svg)
  const isReservedTag = options.isReservedTag || no
  // 是否为一个组件
  maybeComponent = (el: ASTElement) => !!(
    el.component ||
    el.attrsMap[':is'] ||
    el.attrsMap['v-bind:is'] ||
    !(el.attrsMap.is ? isReservedTag(el.attrsMap.is) : isReservedTag(el.tag))
  )
  // 分别获取 options.modules 下的 class、model、style 三个模块中的 transformNode、preTransformNode、postTransformNode 方法
  // 负责处理元素节点上的 class、style、v-model
  transforms = pluckModuleFunction(options.modules, 'transformNode')
  preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
  postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
  
  // 界定符,比如: {{}}
  delimiters = options.delimiters
  
  const stack = []
  // 空格选项
  const preserveWhitespace = options.preserveWhitespace !== false
  const whitespaceOption = options.whitespace
  // 根节点,以 root 为根,处理后的节点都会按照层级挂载到 root 下,最后 return 的就是 root,一个 ast 语法树
  let root
  // 当前元素的父元素
  let currentParent
  let inVPre = false
  let inPre = false
  let warned = false
  function warnOnce (msg, range{
    if (!warned) {
      warned = true
      warn(msg, range)
    }
  }
  
  // 由于代码比较长,后面几个方法单独拿出来。
  function closeElement (element/*...*/ }
  
  function trimEndingWhitespace (el/*...*/ }
  
  function checkRootConstraints (el/*...*/ }
  
  parseHTML(template, {
    /*...*/
  })
  return root
}
复制代码

parse 接收两个参数 templateoptions ,也就是模板字符串和配置选项,options 定义在 /src/platforms/web/compiler/options 中,这里主要是不同的平台(web 和 weex)的配置选项不同。

closeElement

// src/compiler/parser/index.js
function closeElement (element{
  // 移除节点末尾的空格
  trimEndingWhitespace(element)
  // 当前元素不再 pre 节点内,并且也没有被处理过
  if (!inVPre && !element.processed) {
    // 分别处理元素节点的 key、ref、插槽、自闭合的 slot 标签、动态组件、class、style、v-bind、v-on、其它指令和一些原生属性 
    element = processElement(element, options)
  }
  // 处理根节点上存在 v-if、v-else-if、v-else 指令的情况
  // 如果根节点存在 v-if 指令,则必须还提供一个具有 v-else-if 或者 v-else 的同级别节点,防止根元素不存在
  // tree management
  if (!stack.length && element !== root) {
    // allow root elements with v-if, v-else-if and v-else
    if (root.if && (element.elseif || element.else)) {
      if (process.env.NODE_ENV !== 'production') {
        checkRootConstraints(element)
      }
      addIfCondition(root, {
        exp: element.elseif,
        block: element
      })
    } else if (process.env.NODE_ENV !== 'production') {
      warnOnce(
        `Component template should contain exactly one root element. ` +
        `If you are using v-if on multiple elements, ` +
        `use v-else-if to chain them instead.`,
        { start: element.start }
      )
    }
  }
  // 建立父子关系,将自己放到父元素的 children 数组中,然后设置自己的 parent 属性为 currentParent
  if (currentParent && !element.forbidden) {
    if (element.elseif || element.else) {
      processIfConditions(element, currentParent)
    } else {
      if (element.slotScope) {
        // scoped slot
        // keep it in the children list so that v-else(-if) conditions can
        // find it as the prev node.
        const name = element.slotTarget || '"default"'
          ; (currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element
      }
      currentParent.children.push(element)
      element.parent = currentParent
    }
  }
  // 设置子元素,将自己的所有非插槽的子元素设置到 element.children 数组中
  // final children cleanup
  // filter out scoped slots
  element.children = element.children.filter(c => !(c: any).slotScope)
  // remove trailing whitespace node again
  trimEndingWhitespace(element)
  // check pre state
  if (element.pre) {
    inVPre = false
  }
  if (platformIsPreTag(element.tag)) {
    inPre = false
  }
  // 分别为 element 执行 model、class、style 三个模块的 postTransform 方法
  // 但是 web 平台没有提供该方法
  // apply post-transforms
  for (let i = 0; i < postTransforms.length; i++) {
    postTransforms[i](element, options)
  }
}
复制代码

closeElement 方法主要做了三件事:

  • 如果元素没有被处理,调用 processElement 处理元素上的一些属性。
  • 设置当前元素的父元素。
  • 设置当前元素的子元素。

trimEndingWhitespace

// src/compiler/parser/index.js
function trimEndingWhitespace (el{
  // remove trailing whitespace node
  if (!inPre) {
    let lastNode
    while (
      (lastNode = el.children[el.children.length - 1]) &&
      lastNode.type === 3 &&
      lastNode.text === ' '
    ) {
      el.children.pop()
    }
  }
}
复制代码

trimEndingWhitespace 作用就是删除元素中空白的文本节点。

checkRootConstraints

// src/compiler/parser/index.js
function checkRootConstraints (el{
  if (el.tag === 'slot' || el.tag === 'template') {
    warnOnce(
      `Cannot use <${el.tag}> as component root element because it may ` +
      'contain multiple nodes.',
      { start: el.start }
    )
  }
  if (el.attrsMap.hasOwnProperty('v-for')) {
    warnOnce(
      'Cannot use v-for on stateful component root element because ' +
      'it renders multiple elements.',
      el.rawAttrsMap['v-for']
    )
  }
}
复制代码

checkRootConstraints 的作用是对根元素的检查,不能使用 slottemplate 作为根元素,不能在有状态组件的根元素上使用 v-for ,因为它会渲染出多个元素。

parseHTML

// src/compiler/parser/index.js
parseHTML(template, {
    warn,
    expectHTML: options.expectHTML,
    isUnaryTag: options.isUnaryTag,
    canBeLeftOpenTag: options.canBeLeftOpenTag,
    shouldDecodeNewlines: options.shouldDecodeNewlines,
    shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
    shouldKeepComment: options.comments,
    outputSourceRange: options.outputSourceRange,
    /**
     * 开始处理标签
     * @param {*} tag 标签名
     * @param {*} attrs [{ name: attrName, value: attrVal, start, end }, ...] 形式的属性数组
     * @param {*} unary 自闭合标签
     * @param {*} start 标签在 html 字符串中的开始索引
     * @param {*} end 标签在 html 字符串中的结束索引
     */
    start (tag, attrs, unary, start, end) {
      // 如果存在命名空间,,则继承父命名空间
      // check namespace.
      // inherit parent ns if there is one
      const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)
      // handle IE svg bug
      /* istanbul ignore if */
      if (isIE && ns === 'svg') {
        attrs = guardIESVGBug(attrs)
      }
      // 创建 AST 对象
      let element: ASTElement = createASTElement(tag, attrs, currentParent)
      // 设置命名空间
      if (ns) {
        element.ns = ns
      }
      if (process.env.NODE_ENV !== 'production') {
        if (options.outputSourceRange) {
          element.start = start
          element.end = end
          element.rawAttrsMap = element.attrsList.reduce((cumulated, attr) => {
            cumulated[attr.name] = attr
            return cumulated
          }, {})
        }
        attrs.forEach(attr => {
          if (invalidAttributeRE.test(attr.name)) {
            warn(
              `Invalid dynamic argument expression: attribute names cannot contain ` +
              `spaces, quotes, <, >, / or =.`,
              {
                start: attr.start + attr.name.indexOf(`[`),
                end: attr.start + attr.name.length
              }
            )
          }
        })
      }
      // 非服务端渲染的情况下,模版中不应该出现 <style></style>、<script></script> 标签
      if (isForbiddenTag(element) && !isServerRendering()) {
        element.forbidden = true
        process.env.NODE_ENV !== 'production' && warn(
          'Templates should only be responsible for mapping the state to the ' +
          'UI. Avoid placing tags with side-effects in your templates, such as ' +
          `<${tag}>` + ', as they will not be parsed.',
          { start: element.start }
        )
      }
      // 为 element 对象分别执行 class、style、model 模块中的 preTransforms 方法
      // 处理存在 v-model 指令的 input 标签,分别处理 input 为 checkbox、radio、其它的情况
      // apply pre-transforms
      for (let i = 0; i < preTransforms.length; i++) {
        element = preTransforms[i](element, options) || element
      }
      if (!inVPre) {
        // 是否存在 v-pre 指令,存在则设置 element.pre = true
        processPre(element)
        if (element.pre) {
          // 存在 v-pre 指令,则设置 inVPre 为 true
          inVPre = true
        }
      }
      // 如果 pre 标签,则设置 inPre 为 true
      if (platformIsPreTag(element.tag)) {
        inPre = true
      }
      if (inVPre) {
        // 存在 v-pre 指令,这样的节点只会渲染一次,将节点上的属性都设置到 el.attrs 数组对象中,作为静态属性,数据更新时不会渲染这部分内容
        processRawAttrs(element)
      } else if (!element.processed) {
        // structural directives
        // 处理 v-for 属性
        processFor(element)
        // 处理 v-if、v-else-if、v-else
        processIf(element)
        // 处理 v-once 指令
        processOnce(element)
      }
      // root 不存在,当前处理的元素为第一个元素,即组件的 根 元素
      if (!root) {
        root = element
        if (process.env.NODE_ENV !== 'production') {
          // 检查根元素,不能使用 slot 、 template、 v-for 
          checkRootConstraints(root)
        }
      }
      if (!unary) {
        // 非自闭合标签,通过 currentParent 记录当前元素,下一个元素在处理的时候,就知道自己的父元素是谁
        currentParent = element
        // 然后将 element push 到 stack 数组,将来处理到当前元素的闭合标签时用
        stack.push(element)
      } else {
        // 说明当前元素为自闭合标签
        closeElement(element)
      }
    },
    /**
      * 处理结束标签
      * @param {*} tag 结束标签的名称
      * @param {*} start 结束标签的开始索引
      * @param {*} end 结束标签的结束索引
      */
    end (tag, start, end) {
      // 结束标签对应的开始标签的 AST 对象
      const element = stack[stack.length - 1]
      // pop stack
      stack.length -= 1
      currentParent = stack[stack.length - 1]
      if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
        element.end = end
      }
      //设置父子关系
      closeElement(element)
    },
    // 处理文本,基于文本生成 ast 对象,将该 AST 放到它的父元素的 children 中。
    chars (text: stringstartnumberendnumber) {
      // 异常处理
      if (!currentParent) {
        if (process.env.NODE_ENV !== 'production') {
          if (text === template) {
            warnOnce(
              'Component template requires a root element, rather than just text.',
              { start }
            )
          } else if ((text = text.trim())) {
            warnOnce(
              `text "${text}" outside root element will be ignored.`,
              { start }
            )
          }
        }
        return
      }
      // IE textarea placeholder bug
      /* istanbul ignore if */
      if (isIE &&
        currentParent.tag === 'textarea' &&
        currentParent.attrsMap.placeholder === text
      ) {
        return
      }
      const children = currentParent.children
      if (inPre || text.trim()) {
        // 文本在 pre 标签内 或者 text.trim() 不为空
        text = isTextTag(currentParent) ? text : decodeHTMLCached(text)
      } else if (!children.length) {
        // 说明文本不在 pre 标签内而且 text.trim() 为空,而且当前父元素也没有子节点,则将 text 置为空
        // remove the whitespace-only node right after an opening tag
        text = ''
      } else if (whitespaceOption) {
        // 压缩处理
        if (whitespaceOption === 'condense') {
          // in condense mode, remove the whitespace node if it contains
          // line break, otherwise condense to a single space
          text = lineBreakRE.test(text) ? '' : ' '
        } else {
          text = ' '
        }
      } else {
        text = preserveWhitespace ? ' ' : ''
      }
      // 如果经过处理后 text 还存在
      if (text) {
        if (!inPre && whitespaceOption === 'condense') {
          // 不在 pre 节点中,并且配置选项中存在压缩选项,则将多个连续空格压缩为单个
          // condense consecutive whitespaces into single space
          text = text.replace(whitespaceRE, ' ')
        }
        let res
        // 基于 text 生成 AST 对象
        let child: ?ASTNode
        if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
          // 文本中存在表达式(即有界定符(占位符))
          child = {
            type2,
            expression: res.expression,
            tokens: res.tokens,
            text
          }
        } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
          // 纯文本节点
          child = {
            type3,
            text
          }
        }
        // push 到父元素的 children 中
        if (child) {
          if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
            child.start = start
            child.end = end
          }
          children.push(child)
        }
      }
    },
    // 处理注释节点
    comment (text: string, start, end) {
      // adding anything as a sibling to the root node is forbidden
      // comments should still be allowed, but ignored
      // 禁止将任何内容作为 root 的节点的同级进行添加,注释应该被允许,但是会被忽略
      // 如果 currentParent 不存在,说明注释和 root 为同级,忽略
      if (currentParent) {
        // 注释节点的 AST
        const child: ASTText = {
          type3,
          text,
          isCommenttrue
        }
        if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
          // 记录节点的开始索引和结束索引
          child.start = start
          child.end = end
        }
        // push 到父元素的 children 中
        currentParent.children.push(child)
      }
    }
  })
  return root
}
复制代码

对模板的解析主要是通过 parseHTML 函数,他定义在 src/compiler/parser/html-parser 中:

// src/compiler/parser/html-parser
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
const dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`)
const startTagClose = /^\s*(\/?)>/
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
const doctype = /^<!DOCTYPE [^>]+>/i
// #7298: escape - to avoid being passed as HTML comment when inlined in page
const comment = /^<!\--/
const conditionalComment = /^<!\[/
// Special Elements (can contain anything)
export const isPlainTextElement = makeMap('script,style,textarea'true)
const reCache = {}
const decodingMap = {
  '&lt;''<',
  '&gt;''>',
  '&quot;''"',
  '&amp;''&',
  '&#10;''\n',
  '&#9;''\t',
  '&#39;'"'"
}
const encodedAttr = /&(?:lt|gt|quot|amp|#39);/g
const encodedAttrWithNewLines = /&(?:lt|gt|quot|amp|#39|#10|#9);/g
// #5992
const isIgnoreNewlineTag = makeMap('pre,textarea'true)
const shouldIgnoreFirstNewline = (tag, html) => tag && isIgnoreNewlineTag(tag) && html[0] === '\n'
function decodeAttr (value, shouldDecodeNewlines{
  const re = shouldDecodeNewlines ? encodedAttrWithNewLines : encodedAttr
  return value.replace(re, match => decodingMap[match])
}
/**
 * 通过循环遍历 html 模版字符串,依次处理其中的各个标签,以及标签上的属性
 * @param {*} html html 模版
 * @param {*} options 配置项
 */
export function parseHTML (html, options{
  const stack = []
  const expectHTML = options.expectHTML
  // 是否是自闭合标签
  const isUnaryTag = options.isUnaryTag || no
  // 是否可以只有开始标签
  const canBeLeftOpenTag = options.canBeLeftOpenTag || no
  // 记录当前在原始 html 字符串中的开始位置
  let index = 0
  let last, lastTag
  while (html) {
    last = html
    // Make sure we're not in a plaintext content element like script/style
    // 确保不是在 script、style、textarea 这样的纯文本元素中
    if (!lastTag || !isPlainTextElement(lastTag)) {
      // 找第一个 < 字符
      let textEnd = html.indexOf('<')
      // textEnd === 0 说明在开头找到了
      // 分别处理可能找到的注释标签、条件注释标签、Doctype、开始标签、结束标签
      // 每处理完一种情况,就会截断(continue)循环,并且重置 html 字符串,将处理过的标签截掉,下一次循环处理剩余的 html 字符串模版
      if (textEnd === 0) {
        // Comment:
        // 处理注释标签 <!-- xx -->
        if (comment.test(html)) {
          // 注释标签的结束索引
          const commentEnd = html.indexOf('-->')
          if (commentEnd >= 0) {
            // 是否应该保留 注释
            if (options.shouldKeepComment) {
              // 得到:注释内容、注释的开始索引、结束索引
              options.comment(html.substring(4, commentEnd), index, index + commentEnd + 3)
            }
            // 调整 html 和 index 变量
            advance(commentEnd + 3)
            continue
          }
        }
        // 处理条件注释标签:<!--[if IE]>
        // http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
        if (conditionalComment.test(html)) {
          // 结束位置
          const conditionalEnd = html.indexOf(']>')
          if (conditionalEnd >= 0) {
            // 调整 html 和 index 变量
            advance(conditionalEnd + 2)
            continue
          }
        }
        // 处理 Doctype,<!DOCTYPE html>
        const doctypeMatch = html.match(doctype)
        if (doctypeMatch) {
          advance(doctypeMatch[0].length)
          continue
        }
        /**
         * 处理开始标签和结束标签是这整个函数中的核型部分
         * 这两部分就是在构造 element ast
         */
        // 处理结束标签,比如 </div>
        const endTagMatch = html.match(endTag)
        if (endTagMatch) {
          const curIndex = index
          advance(endTagMatch[0].length)
          // 处理结束标签
          parseEndTag(endTagMatch[1], curIndex, index)
          continue
        }
        // 处理开始标签
        const startTagMatch = parseStartTag()
        if (startTagMatch) {
          // 进一步处理上一步得到结果,并最后调用 options.start 方法
          // 真正的解析工作都是在这个 start 方法中做的
          handleStartTag(startTagMatch)
          if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) {
            advance(1)
          }
          continue
        }
      }
      let text, rest, next
      if (textEnd >= 0) {
        // 能走到这儿,说明虽然在 html 中匹配到到了 <xx,但是这不属于上述几种情况,
        // 它就只是一个普通的一段文本:<我是文本
        // 于是从 html 中找到下一个 <,直到 <xx 是上述几种情况的标签,则结束,
        // 在这整个过程中一直在调整 textEnd 的值,作为 html 中下一个有效标签的开始位置
        // 截取 html 模版字符串中 textEnd 之后的内容,rest = <xx
        rest = html.slice(textEnd)
        // 这个 while 循环就是处理 <xx 之后的纯文本情况
        // 截取文本内容,并找到有效标签的开始位置(textEnd)
        while (
          !endTag.test(rest) &&
          !startTagOpen.test(rest) &&
          !comment.test(rest) &&
          !conditionalComment.test(rest)
        ) {
          // 则认为 < 后面的内容为纯文本,然后在这些纯文本中再次找 <
          next = rest.indexOf('<'1)
          // 如果没找到 <,则直接结束循环
          if (next < 0break
          // 走到这儿说明在后续的字符串中找到了 <,索引位置为 textEnd
          textEnd += next
          // 截取 html 字符串模版 textEnd 之后的内容赋值给 rest,继续判断之后的字符串是否存在标签
          rest = html.slice(textEnd)
        }
        // 走到这里,说明遍历结束,有两种情况,一种是 < 之后就是一段纯文本,要不就是在后面找到了有效标签,截取文本
        text = html.substring(0, textEnd)
      }
      // 如果 textEnd < 0,说明 html 中就没找到 <,那说明 html 就是一段文本
      if (textEnd < 0) {
        text = html
      }
      // 将文本内容从 html 模版字符串上截取掉
      if (text) {
        advance(text.length)
      }
      // 处理文本
      // 基于文本生成 ast 对象,然后将该 ast 放到它的父元素的中
      // 即 currentParent.children 数组中
      if (options.chars && text) {
        options.chars(text, index - text.length, index)
      }
    } else {
      // 处理 script、style、textarea 标签的闭合标签
      let endTagLength = 0
      // 开始标签的小写形式
      const stackedTag = lastTag.toLowerCase()
      const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)''i'))
      // 匹配并处理开始标签和结束标签之间的所有文本,比如 <script>xx</script>
      const rest = html.replace(reStackedTag, function (all, text, endTag{
        endTagLength = endTag.length
        if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
          text = text
            .replace(/<!\--([\s\S]*?)-->/g'$1'// #7298
            .replace(/<!\[CDATA\[([\s\S]*?)]]>/g'$1')
        }
        if (shouldIgnoreFirstNewline(stackedTag, text)) {
          text = text.slice(1)
        }
        if (options.chars) {
          options.chars(text)
        }
        return ''
      })
      index += html.length - rest.length
      html = rest
      parseEndTag(stackedTag, index - endTagLength, index)
    }
    // 到这里就处理结束,如果 stack 数组中还有内容,则说明有标签没有被闭合,给出提示信息
    if (html === last) {
      options.chars && options.chars(html)
      if (process.env.NODE_ENV !== 'production' && !stack.length && options.warn) {
        options.warn(`Mal-formatted tag at end of template: "${html}"`, { start: index + html.length })
      }
      break
    }
  }
  // Clean up any remaining tags
  parseEndTag()
  /**
   * 重置 html,html = 从索引 n 位置开始的向后的所有字符
   * index 为 html 在 原始的 模版字符串 中的的开始索引,也是下一次该处理的字符的开始位置
   * @param {*} n 索引
   */
  function advance (n{
    index += n
    html = html.substring(n)
  }
  /**
   * 解析开始标签,比如:<div id="app">
   * @returns { tagName: 'div', attrs: [[xx], ...], start: index }
   */
  function parseStartTag ({
    const start = html.match(startTagOpen)
    if (start) {
      // 处理结果
      const match = {
        // 标签名
        tagName: start[1],
        // 属性,占位符
        attrs: [],
        // 标签的开始位置
        start: index
      }
      /**
        * 调整 html 和 index,比如:
        *   html = ' id="app">'
        *   index = 此时的索引
        *   start[0] = '<div'
        */
      advance(start[0].length)
      let end, attr
      // 处理 开始标签 内的各个属性,并将这些属性放到 match.attrs 数组中
      while (!(end = html.match(startTagClose)) && (attr = html.match(dynamicArgAttribute) || html.match(attribute))) {
        attr.start = index
        advance(attr[0].length)
        attr.end = index
        match.attrs.push(attr)
      }
      // 开始标签的结束,end = '>' 或 end = ' />'
      if (end) {
        match.unarySlash = end[1]
        advance(end[0].length)
        match.end = index
        return match
      }
    }
  }
  /**
   *  进一步处理开始标签的解析结果 ——— match 对象
   *  处理属性 match.attrs,如果不是自闭合标签,则将标签信息放到 stack 数组,待将来处理到它的闭合标签时再将其弹出 stack,表示该标签处理完毕,这时标签的所有信息都在 element ast 对象上了
   *  接下来调用 options.start 方法处理标签,并根据标签信息生成 element ast,
   *  以及处理开始标签上的属性和指令,最后将 element ast 放入 stack 数组
   * 
   * @param {*} match { tagName: 'div', attrs: [[xx], ...], start: index }
   */
  function handleStartTag (match{
    const tagName = match.tagName
    // />
    const unarySlash = match.unarySlash
    if (expectHTML) {
      if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
        parseEndTag(lastTag)
      }
      if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
        parseEndTag(tagName)
      }
    }
    // 一元标签,比如 <hr />
    const unary = isUnaryTag(tagName) || !!unarySlash
    // 处理 match.attrs,得到 attrs = [{ name: attrName, value: attrVal, start: xx, end: xx }, ...]
    // 比如 attrs = [{ name: 'id', value: 'app', start: xx, end: xx }, ...
    const l = match.attrs.length
    const attrs = new Array(l)
    for (let i = 0; i < l; i++) {
      const args = match.attrs[i]
      // 比如:args[3] => 'id',args[4] => '=',args[5] => 'app'
      const value = args[3] || args[4] || args[5] || ''
      const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
        ? options.shouldDecodeNewlinesForHref
        : options.shouldDecodeNewlines
      // attrs[i] = { id: 'app' }
      attrs[i] = {
        name: args[1],
        value: decodeAttr(value, shouldDecodeNewlines)
      }
      // 非生产环境,记录属性的开始和结束索引
      if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
        attrs[i].start = args.start + args[0].match(/^\s*/).length
        attrs[i].end = args.end
      }
    }
    // 如果不是自闭合标签,则将标签信息放到 stack 数组中,待将来处理到它的闭合标签时再将其弹出 stack
    // 如果是自闭合标签,则标签信息就没必要进入 stack 了,直接处理众多属性,将他们都设置到 element ast 对象上,就没有处理 结束标签的那一步了,这一步在处理开始标签的过程中就进行了
    if (!unary) {
      // 将标签信息放到 stack 数组中,{ tag, lowerCasedTag, attrs, start, end }
      stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
      // 标识当前标签的结束标签为 tagName
      lastTag = tagName
    }
    /**
      * 调用 start 方法,主要做了以下 6 件事情:
      *   1、创建 AST 对象
      *   2、处理存在 v-model 指令的 input 标签,分别处理 input 为 checkbox、radio、其它的情况
      *   3、处理标签上的众多指令,比如 v-pre、v-for、v-if、v-once
      *   4、如果根节点 root 不存在则设置当前元素为根节点
      *   5、如果当前元素为非自闭合标签则将自己 push 到 stack 数组,并记录 currentParent,在接下来处理子元素时用来告诉子元素自己的父节点是谁
      *   6、如果当前元素为自闭合标签,则表示该标签要处理结束了,让自己和父元素产生关系,以及设置自己的子元素
      */
    if (options.start) {
      options.start(tagName, attrs, unary, match.start, match.end)
    }
  }
  /**
   * 解析结束标签,比如:</div>
   * 最主要的事就是:
   *   1、处理 stack 数组,从 stack 数组中找到当前结束标签对应的开始标签,然后调用 options.end 方法
   *   2、处理完结束标签之后调整 stack 数组,保证在正常情况下 stack 数组中的最后一个元素就是下一个结束标签对应的开始标签
   *   3、处理一些异常情况,比如 stack 数组最后一个元素不是当前结束标签对应的开始标签,还有就是
   *      br 和 p 标签单独处理
   * @param {*} tagName 标签名,比如 div
   * @param {*} start 结束标签的开始索引
   * @param {*} end 结束标签的结束索引
   */
  function parseEndTag (tagName, start, end{
    let pos, lowerCasedTagName
    if (start == null) start = index
    if (end == null) end = index
    // 倒序遍历 stack 数组,找到第一个和当前结束标签相同的标签,该标签就是结束标签对应的开始标签的描述对象
    // 理论上,不出异常,stack 数组中的最后一个元素就是当前结束标签的开始标签的描述对象
    // Find the closest opened tag of the same type
    if (tagName) {
      lowerCasedTagName = tagName.toLowerCase()
      for (pos = stack.length - 1; pos >= 0; pos--) {
        if (stack[pos].lowerCasedTag === lowerCasedTagName) {
          break
        }
      }
    } else {
      // If no tag name is provided, clean shop
      pos = 0
    }
    // 如果在 stack 中一直没有找到相同的标签名,则 pos 就会 < 0,进行后面的 else 分支
    if (pos >= 0) {
      // 这个 for 循环负责关闭 stack 数组中索引 >= pos 的所有标签
      // 为什么要用一个循环,上面说到正常情况下 stack 数组的最后一个元素就是我们要找的开始标签,
      // 但是有些异常情况,就是有些元素没有给提供结束标签,比如:
      // stack = ['span', 'div', 'span', 'h1'],当前处理的结束标签 tagName = div
      // 匹配到 div,pos = 1,那索引为 2 和 3 的两个标签(span、h1)说明就没提供结束标签
      // 这个 for 循环就负责关闭 div、span 和 h1 这三个标签,
      // 并在开发环境为 span 和 h1 这两个标签给出 ”未匹配到结束标签的提示”
      // Close all the open elements, up the stack
      for (let i = stack.length - 1; i >= pos; i--) {
        if (process.env.NODE_ENV !== 'production' &&
          (i > pos || !tagName) &&
          options.warn
        ) {
          options.warn(
            `tag <${stack[i].tag}> has no matching end tag.`,
            { start: stack[i].start, end: stack[i].end }
          )
        }
        if (options.end) {
          // 走到这里,说明上面的异常情况都处理完了,调用 options.end 处理正常的结束标签
          options.end(stack[i].tag, start, end)
        }
      }
      // 将刚才处理的那些标签从数组中移除,保证数组的最后一个元素就是下一个结束标签对应的开始标签
      // Remove the open elements from the stack
      stack.length = pos
      // lastTag 记录 stack 数组中未处理的最后一个开始标签
      lastTag = pos && stack[pos - 1].tag
    } else if (lowerCasedTagName === 'br') {
      // 当前处理的标签为 <br /> 标签
      if (options.start) {
        options.start(tagName, [], true, start, end)
      }
    } else if (lowerCasedTagName === 'p') {
      // 处理 <p> 标签
      if (options.start) {
        options.start(tagName, [], false, start, end)
      }
      // 处理 </p> 标签
      if (options.end) {
        options.end(tagName, start, end)
      }
    }
  }
}
复制代码

parseHTML 的主要逻辑就是循环解析,用正则做匹配,然后做不同的处理,在匹配的过程中利用 advance 函数不断改变索引,直到解析完毕。

通过正则可以匹配到注释标签、文档类型标签、开始标签、结束标签。通过 handleStartTag 方法解析开始标签,将非一元标签构建出来的 AST 对象推入 stack 中,通过 parseEndTag 方法对闭合标签做解析,也就是倒序的 stack ,找到第一个和当前结束标签相同的标签,该标签就是结束标签对应的开始标签的描述对象。

AST 元素节点总共有 3 种类型,type 为 1 表示是普通元素,为 2 表示是表达式,为 3 表示是纯文本。parse 的作用就是利用正则将模板字符创解析成 AST 语法树。

optimize

在模板解析之后,生成 AST 树,接下来就是对 AST 的一些优化。

optimize

// src/compiler/optimizer.js
/**
 * Goal of the optimizer: walk the generated template AST tree
 * and detect sub-trees that are purely static, i.e. parts of
 * the DOM that never needs to change.
 *
 * Once we detect these sub-trees, we can:
 *
 * 1. Hoist them into constants, so that we no longer need to
 *    create fresh nodes for them on each re-render;
 * 2. Completely skip them in the patching process.
 */
export function optimize (root: ?ASTElement, options: CompilerOptions{
  if (!root) return
  /**
  * options.staticKeys = 'staticClass,staticStyle'
  * isStaticKey = function(val) { return map[val] }
  */
  isStaticKey = genStaticKeysCached(options.staticKeys || '')
  // 平台保留标签
  isPlatformReservedTag = options.isReservedTag || no
  // first pass: mark all non-static nodes.
  //  标记静态节点
  markStatic(root)
  // second pass: mark static roots.
  //  标记静态根
  markStaticRoots(root, false)
}
复制代码

markStatic

// src/compiler/optimizer.js
function markStatic (node: ASTNode{
  // 通过 node.static 来标识节点是否为 静态节点
  node.static = isStatic(node)
  if (node.type === 1) {
    // do not make component slot content static. this avoids
    // 1. components not able to mutate slot nodes
    // 2. static slot content fails for hot-reloading
    /**
   * 不要将组件的插槽内容设置为静态节点,这样可以避免:
   *   1、组件不能改变插槽节点
   *   2、静态插槽内容在热重载时失败
   */
    if (
      !isPlatformReservedTag(node.tag) &&
      node.tag !== 'slot' &&
      node.attrsMap['inline-template'] == null
    ) {
      // 递归终止条件,如果节点不是平台保留标签  && 也不是 slot 标签 && 也不是内联模版,则直接结束
      return
    }
    // 遍历子节点,递归调用 markStatic 来标记这些子节点的 static 属性
    for (let i = 0, l = node.children.length; i < l; i++) {
      const child = node.children[i]
      markStatic(child)
      // 如果子节点是非静态节点,则将父节点更新为非静态节点
      if (!child.static) {
        node.static = false
      }
    }
    // 如果节点存在 v-if、v-else-if、v-else 这些指令,则依次标记 block 中节点的 static
    if (node.ifConditions) {
      for (let i = 1, l = node.ifConditions.length; i < l; i++) {
        const block = node.ifConditions[i].block
        markStatic(block)
        if (!block.static) {
          node.static = false
        }
      }
    }
  }
}

/**
 * 判断节点是否为静态节点:
 *  通过自定义的 node.type 来判断,2: 表达式 => 动态,3: 文本 => 静态
 *  凡是有 v-bind、v-if、v-for 等指令的都属于动态节点
 *  组件为动态节点
 *  父节点为含有 v-for 指令的 template 标签,则为动态节点
 */
function isStatic (node: ASTNode): boolean {
  if (node.type === 2) { // expression
    // 比如:{{ msg }}
    return false
  }
  if (node.type === 3) { // text
    return true
  }
  return !!(node.pre || (
    !node.hasBindings && // no dynamic bindings
    !node.if && !node.for && // not v-if or v-for or v-else
    !isBuiltInTag(node.tag) && // not a built-in
    isPlatformReservedTag(node.tag) && // not a component
    !isDirectChildOfTemplateFor(node) &&
    Object.keys(node).every(isStaticKey)
  ))
}
复制代码

markStaticRoots

// src/compiler/optimizer.js
function markStaticRoots (node: ASTNode, isInFor: boolean{
  if (node.type === 1) {
    if (node.static || node.once) {
      // 已经是 static 的节点或者是 v-once 指令的节点
      node.staticInFor = isInFor
    }
    // For a node to qualify as a static root, it should have children that
    // are not just static text. Otherwise the cost of hoisting out will
    // outweigh the benefits and it's better off to just always render it fresh.
    if (node.static && node.children.length && !(
      node.children.length === 1 &&
      node.children[0].type === 3
    )) {
      // 除了本身是一个静态节点外,必须满足拥有 children,并且 children 不能只是一个文本节点
      node.staticRoot = true
      return
    } else {
      node.staticRoot = false
    }
    // 当前节点不是静态根,递归遍历其子节点,标记静态根
    if (node.children) {
      for (let i = 0, l = node.children.length; i < l; i++) {
        markStaticRoots(node.children[i], isInFor || !!node.for)
      }
    }
    // 如果节点存在 v-if、v-else-if、v-else 指令,则为 block 节点标记静态根
    if (node.ifConditions) {
      for (let i = 1, l = node.ifConditions.length; i < l; i++) {
        markStaticRoots(node.ifConditions[i].block, isInFor)
      }
    }
  }
}
复制代码

在模板不是所有数据都是响应式的,有些数据是首次渲染之后就不会在发生变化的,通过遍历生成的模板 AST 树,对这些节点进行标记,就可以在 patch 的过程中跳过它们,从而提高对比的性能。

optimize 中实际上就是通过 markStatic(root) 对静态节点进行标记和 使用 markStaticRoots(root, false) 标记静态根。

generate

在生成 AST 语法树后,对 AST 进行优化,标记静态节点和静态根。最后就是通过 generate 生成代码字符串。

generate

// src/compiler/codegen/index.js
export function generate (
  ast: ASTElement | void,
  options: CompilerOptions
): CodegenResult {
  const state = new CodegenState(options)
  // fix #11483, Root level <script> tags should not be rendered.
  const code = ast ? (ast.tag === 'script' ? 'null' : genElement(ast, state)) : '_c("div")'
  return {
    render`with(this){return ${code}}`,
    staticRenderFns: state.staticRenderFns
  }
}
复制代码

state 是 CodegenState 的一个实例,在生成代码的时候会用到其中的一些属性和方法。generate 函数主要是通过 genElement 生成 code , 然后在用 with(this){return ${code}} 将其包裹起来。

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) {
    // 处理带有 v-once 指令的节点
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {
    // 处理 v-for
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    // 处理 v-if
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    // 处理子节点
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    // 处理插槽
    return genSlot(el, state)
  } else {
    // component or element
    let code
    if (el.component) {
      // 处理动态组件
      code = genComponent(el.component, el, state)
    } else {
      // 自定义组件和原生标签
      let data
      if (!el.plain || (el.pre && state.maybeComponent(el))) {
        // 非普通元素或者带有 v-pre 指令的组件走这里,处理节点的所有属性
        data = genData(el, state)
      }
      // 处理子节点,得到所有子节点字符串格式的代码组成的数组
      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 的作用主要就是对 AST 节点上的属性使用不同方法做处理,而生成代码函数。

genStatic

// src/compiler/codegen/index.js
// hoist static sub-trees out
function genStatic (el: ASTElement, state: CodegenState): string {
  // 标记当前静态节点已经被处理
  el.staticProcessed = true
  // Some elements (templates) need to behave differently inside of a v-pre
  // node.  All pre nodes are static roots, so we can use this as a location to
  // wrap a state change and reset it upon exiting the pre node.
  const originalPreState = state.pre
  if (el.pre) {
    state.pre = el.pre
  }
  // 将生成的代码添加到 staticRenderFns 中
  state.staticRenderFns.push(`with(this){return ${genElement(el, state)}}`)
  state.pre = originalPreState
  // 返回 _m 函数,state.staticRenderFns.length - 1 表示数组中的下标
  return `_m(${state.staticRenderFns.length - 1
    }${el.staticInFor ? ',true' : ''
    })`
}
复制代码

genOnce

// src/compiler/codegen/index.js
function genOnce (el: ASTElement, state: CodegenState): string {
  // 标记当前节点的 v-once 指令已被处理
  el.onceProcessed = true
  if (el.if && !el.ifProcessed) {
    // 含有 v-if 并且 V-if没有被处理,则处理 V-if 最终生成一段三元运算符的代码
    return genIf(el, state)
  } else if (el.staticInFor) {
    // 说明当前节点是被包裹在还有 v-for 指令节点内部的静态节点
    let key = ''
    let parent = el.parent
    while (parent) {
      if (parent.for) {
        key = parent.key
        break
      }
      parent = parent.parent
    }
    if (!key) {
      process.env.NODE_ENV !== 'production' && state.warn(
        `v-once can only be used inside v-for that is keyed. `,
        el.rawAttrsMap['v-once']
      )
      return genElement(el, state)
    }
    // 生成 _o 函数
    return `_o(${genElement(el, state)},${state.onceId++},${key})`
  } else {
    // 上面情况都不符合,说明是简单的静态节点,生成 _m 函数
    return genStatic(el, state)
  }
}
复制代码

genFor

// 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}` : ''
  // 提示 v-for 在组件上时必须使用 key
  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 */
    )
  }
  // 标记当前节点上的 v-for 指令已被处理
  el.forProcessed = true // avoid recursion
  /**
   * 生成 _l 函数,比如:
   *     v-for="(item,index) in data"
   * 
   *    _l((data), function (item, index) {
   *     return genElememt(el, state)
   *   })
   */
  return `${altHelper || '_l'}((${exp}),` +
    `function(${alias}${iterator1}${iterator2}){` +
    `return ${(altGen || genElement)(el, state)}` +
    '})'
}
复制代码

genIf

// src/compiler/codegen/index.js
export function genIf (
  el: any,
  state: CodegenState,
  altGen?: Function,
  altEmpty?: string
): string {
  // 标记当前节点的 v-if 指令已经被处理
  el.ifProcessed = true // avoid recursion
  // 得到三元表达式,condition ? render1 : render2
  return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)
}

function genIfConditions (
  conditions: ASTIfConditions,
  state: CodegenState,
  altGen?: Function,
  altEmpty?: string
): string {
  // 长度为空,直接返回一个空节点渲染函数
  if (!conditions.length) {
    return altEmpty || '_e()'
  }
  // 依次从 conditions 获取第一个 condition
  const condition = conditions.shift()
  if (condition.exp) {
    // 通过对 condition.exp 去生成一段三元运算符的代码,
    // : 后是递归调用,如果有多个 conditions,就生成多层三元运算
    return `(${condition.exp})?${genTernaryExp(condition.block)
      }:${genIfConditions(conditions, state, altGen, altEmpty)
      }`
  } else {
    return `${genTernaryExp(condition.block)}`
  }
  // v-if with v-once should generate code like (a)?_m(0):_m(1)
  function genTernaryExp (el{
    return altGen
      ? altGen(el, state)
      : el.once
        ? genOnce(el, state)
        : genElement(el, state)
  }
}
复制代码

genChildren

// src/compiler/codegen/index.js
export function genChildren (
  el: ASTElement,
  state: CodegenState,
  checkSkip?: boolean,
  altGenElement?: Function,
  altGenNode?: Function
): string | void {
  const children = el.children
  if (children.length) {
    const el: any = children[0]
    // optimize single v-for
    if (children.length === 1 &&
      el.for &&
      el.tag !== 'template' &&
      el.tag !== 'slot'
    ) {
      // 一个子节点 && 节点上有 v-for && 不是 template 标签 && 不是 slot
      // 则直接调用 genElement,从而进入到 genFor
      const normalizationType = checkSkip
        ? state.maybeComponent(el) ? `,1` : `,0`
        : ``
      return `${(altGenElement || genElement)(el, state)}${normalizationType}`
    }
    const normalizationType = checkSkip
      ? getNormalizationType(children, state.maybeComponent)
      : 0
    // 生成代码的一个函数
    const gen = altGenNode || genNode
    // 返回一个数组,数组的每个元素都是一个子节点的渲染函数,
    // 格式:['_c(tag, data, children, normalizationType)', ...]
    return `[${children.map(c => gen(c, state)).join(',')}]${normalizationType ? `,${normalizationType}` : ''
      }`
  }
}
复制代码

genSlot

// src/compiler/codegen/index.js
function genSlot (el: ASTElement, state: CodegenState): string {
  // 插槽名称
  const slotName = el.slotName || '"default"'
  // 处理子节点
  const children = genChildren(el, state)
  // 最终返回 _t 函数
  let res = `_t(${slotName}${children ? `,function(){return ${children}}` : ''}`
  const attrs = el.attrs || el.dynamicAttrs
    ? genProps((el.attrs || []).concat(el.dynamicAttrs || []).map(attr => ({
      // slot props are camelized
      name: camelize(attr.name),
      value: attr.value,
      dynamic: attr.dynamic
    })))
    : null
  const bind = el.attrsMap['v-bind']
  if ((attrs || bind) && !children) {
    res += `,null`
  }
  if (attrs) {
    res += `,${attrs}`
  }
  if (bind) {
    res += `${attrs ? '' : ',null'},${bind}`
  }
  return res + ')'
}
复制代码

genProps

// src/compiler/codegen/index.js
function genProps (props: Array<ASTAttr>): string {
  // 静态属性
  let staticProps = ``
  // 动态属性
  let dynamicProps = ``
  // 遍历属性数组
  for (let i = 0; i < props.length; i++) {
    // 属性
    const prop = props[i]
    // 属性值
    const value = __WEEX__
      ? generateValue(prop.value)
      : transformSpecialNewlines(prop.value)
    if (prop.dynamic) {
      // 动态属性,`dAttrName,dAttrVal,...`
      dynamicProps += `${prop.name},${value},`
    } else {
      // 静态属性,'attrName,attrVal,...'
      staticProps += `"${prop.name}":${value},`
    }
  }
  // 去掉静态属性最后的逗号
  staticProps = `{${staticProps.slice(0, -1)}}`
  if (dynamicProps) {
    // 如果存在动态属性则返回:
    // _d(静态属性字符串,动态属性字符串)
    return `_d(${staticProps},[${dynamicProps.slice(0, -1)}])`
  } else {
    // 说明属性数组中不存在动态属性,直接返回静态属性字符串
    return staticProps
  }
}
复制代码

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}",`
  }
  // 为节点执行模块(class、style)的 genData 方法,
  // 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
  // 自定义事件,如 { `on${eventName}:handleCode` } 或者 { `on_d(${eventName}:handleCode`, `${eventName},handleCode`) }
  if (el.events) {
    data += `${genHandlers(el.events, false)},`
  }
  // 带 .native 修饰符的事件,
  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
  // v-bind with dynamic arguments must be applied using the same v-bind object
  // merge helper so that class/style/mustUseProp attrs are handled correctly.
  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
}
复制代码

genData 函数就是根据 AST 元素节点的属性构造出一个 data 对象字符串,这个在后面创建 VNode 的时候的时候会作为参数传入。

genComponent

// src/compiler/codegen/index.js
function genComponent (
  componentName: string,
  el: ASTElement,
  state: CodegenState
): string {
  // 所有的子节点
  const children = el.inlineTemplate ? null : genChildren(el, state, true)
  // 返回 `_c(compName, data, children)`
  // compName 是 is 属性的值
  return `_c(${componentName},${genData(el, state)}${children ? `,${children}` : ''
    })`
}
复制代码

举个栗子

模板

<ul :class="bindCls" class="list" v-if="isShow">
  <li v-for="(item,index) in data" @click="clickItem(index)">{{item}}:{{index}}</li>
</ul>
复制代码

parse 生成 AST

ast = {
  'type'1,
  'tag''ul',
  'attrsList': [],
  'attrsMap': {
    ':class''bindCls',
    'class''list',
    'v-if''isShow'
  },
  'if''isShow',
  'ifConditions': [{
    'exp''isShow',
    'block'// ul ast element
  }],
  'parent'undefined,
  'plain'false,
  'staticClass''list',
  'classBinding''bindCls',
  'children': [{
    'type'1,
    'tag''li',
    'attrsList': [{
      'name''@click',
      'value''clickItem(index)'
    }],
    'attrsMap': {
      '@click''clickItem(index)',
      'v-for''(item,index) in data'
    },
    'parent'// ul ast element
      'plain'false,
    'events': {
      'click': {
        'value''clickItem(index)'
      }
    },
    'hasBindings'true,
    'for''data',
    'alias''item',
    'iterator1''index',
    'children': [
      'type'2,
      'expression''_s(item)+":"+_s(index)'
      'text''{{item}}:{{index}}',
      'tokens': [
        { '@binding''item' },
        ':',
        { '@binding''index' }
      ]
    ]
  }]
}
复制代码

optimize 优化 AST

ast = {
  'type'1,
  'tag''ul',
  'attrsList': [],
  'attrsMap': {
    ':class''bindCls',
    'class''list',
    'v-if''isShow'
  },
  'if''isShow',
  'ifConditions': [{
    'exp''isShow',
    'block'// ul ast element
  }],
  'parent'undefined,
  'plain'false,
  'staticClass''list',
  'classBinding''bindCls',
  'static'false,
  'staticRoot'false,
  'children': [{
    'type'1,
    'tag''li',
    'attrsList': [{
      'name''@click',
      'value''clickItem(index)'
    }],
    'attrsMap': {
      '@click''clickItem(index)',
      'v-for''(item,index) in data'
    },
    'parent'// ul ast element
      'plain'false,
    'events': {
      'click': {
        'value''clickItem(index)'
      }
    },
    'hasBindings'true,
    'for''data',
    'alias''item',
    'iterator1''index',
    'static'false,
    'staticRoot'false,
    'children': [
      'type'2,
      'expression''_s(item)+":"+_s(index)'
      'text''{{item}}:{{index}}',
      'tokens': [
        { '@binding''item' },
        ':',
        { '@binding''index' }
      ],
      'static'false
    ]
  }]
}
复制代码

generate 生成代码

with (this) {
  return (isShow) ?
    _c('ul', {
      staticClass"list",
      class: bindCls
    },
      _l((data), function (item, index{
        return _c('li', {
          on: {
            "click"function ($event{
              clickItem(index)
            }
          }
        },
          [_v(_s(item) + ":" + _s(index))])
      })
    ) : _e()
}
复制代码

最终生成了许多简写函数,比如 _c_t_l_m , 这些函数都定义在:

// src/core/instance/render-helpers/index.js
export function installRenderHelpers (target: any{
  target._o = markOnce
  target._n = toNumber
  target._s = toString
  target._l = renderList
  target._t = renderSlot
  target._q = looseEqual
  target._i = looseIndexOf
  target._m = renderStatic
  target._f = resolveFilter
  target._k = checkKeyCodes
  target._b = bindObjectProps
  target._v = createTextVNode
  target._e = createEmptyVNode
  target._u = resolveScopedSlots
  target._g = bindObjectListeners
  target._d = bindDynamicKeys
  target._p = prependModifier
}
复制代码

到此,Vue 的源码大体梳理完毕,在此期间查看了许多大佬的文章,感谢大佬们的无私分享,感谢友好的前端圈。

相关链接

Vue(v2.6.14)源码解毒(预):手写一个简易版Vue

Vue(v2.6.14)源码解毒(一):准备工作

Vue(v2.6.14)源码解毒(二):初始化和挂载

Vue(v2.6.14)源码解毒(三):响应式原理

Vue(v2.6.14)源码解毒(四):更新策略

Vue(v2.6.14)源码解毒(五):render和VNode

Vue(v2.6.14)源码解毒(六):update和patch

Vue(v2.6.14)源码解毒(七):模板编译

如果觉得还凑合的话,给个赞吧!!!也可以来我的个人博客逛逛 www.mingme.net/

文章分类
前端
文章标签