Vue v2.6.11 模板编译源码解析

<template>  <div @click=handleClick>{{ count }}</div>  <span></span></template>

export const createCompiler = createCompilerCreator(function baseCompile (  template: string,  options: CompilerOptions): CompiledResult {  // parse会用正则等方式解析template模版中的指令、class、style等数据，生成AST  const ast = parse(template.trim(), options)  // optimize作用是标记静态节点，在patch的过程中，DOM-DIFF算法会直接跳过静态节点，提高patch性能  if (options.optimize !== false) {    optimize(ast, options)  }  // 把AST转换成render函数字符串的过程，得到的是render函数的字符串以及staticRenderFns字符串  const code = generate(ast, options)  return {    ast,    render: code.render,    staticRenderFns: code.staticRenderFns  }})

function isStatic (node: ASTNode): boolean {  if (node.type === 2) { // expression    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)  ))}

function markStatic (node: ASTNode) {  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    if (      !isPlatformReservedTag(node.tag) &&      node.tag !== 'slot' &&      node.attrsMap['inline-template'] == null    ) {      return    }    for (let i = 0, l = node.children.length; i < l; i++) {      const child = node.children[i]      markStatic(child)      if (!child.static) {        node.static = false      }    }    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        }      }    }  }}

function markStaticRoots (node: ASTNode, isInFor: boolean) {  if (node.type === 1) {    if (node.static || node.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    )) {      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)      }    }    if (node.ifConditions) {      for (let i = 1, l = node.ifConditions.length; i < l; i++) {        markStaticRoots(node.ifConditions[i].block, isInFor)      }    }  }}

parseHTML() {  // 解析到开始标签时，调用这个函数，生成元素节点的AST  start(tag, attrs, unary) {    let element: ASTElement = createASTElement(tag, attrs, currentParent)  }  // 解析到结束标签，调用end函数  end（tag, start, end）{      closeElement(element)  } // 解析到文本时，调用chars函数生成文本类型的ast节点  chars(text) {    // 如果是带变量的动态文本     if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {          child = {            type: 2,            expression: res.expression,            tokens: res.tokens,            text          }        } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {          child = {            type: 3,            text          }        }  }  // 当解析到标签的注释，触发comment  comment(text) {      const child: ASTText = {          type: 3,          text,          isComment: true        }  }}

const comment = /^<!\--/    if (comment.test(html)) {        const commentEnd = html.indexOf('-->')        if (commentEnd >= 0) {            if (options.shouldKeepComment) {                options.comment(html.substring(4, commentEnd), index, index + commentEnd + 3)            }            // 移动解析游标            /*            index 0            advance(3)            index 3 (v)            <div >{{ greeting }} World!</div>            */            advance(commentEnd + 3)            continue      }}

 functionparseStartTag() {   const startTagOpen = new RegExp(`^<${qnameCapture}`)    const start = html.match(startTagOpen)    if (start) {      const match = {        tagName: start[1],        attrs: [],        start: index      }      advance(start[0].length)      let end, attr      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)      }      if (end) {        match.unarySlash = end[1]        advance(end[0].length)        match.end = index        return match      }    }}

<div><p><span></span></p></div>

<div><p><span></p></div>

var text = ${data}  ? 'data' : 'xx';// 当解析到标签的文本时，触发charschars (text) {  if(res = parseText(text)){       let element = {           type: 2,           expression: res.expression,           tokens: res.tokens,           text       }    } else {       let element = {           type: 3,           text       }    }}

let text = "我叫{{name}}, 我几年{{age}}岁了";let res = parseText(text);res = {  expression: "我叫" + _s(name)+ ", 我今年"+ _s(age)+ "岁了",  tokens: [    "我叫",    {'@binding': name},    ", 我今年",    {'@binding': age},    "岁了"  ]}

/* @flow */import { cached } from 'shared/util'import { parseFilters } from './filter-parser'const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/gconst regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/gconst buildRegex = cached(delimiters => {  const open = delimiters[0].replace(regexEscapeRE, '\\$&')  const close = delimiters[1].replace(regexEscapeRE, '\\$&')  return new RegExp(open + '((?:.|\\n)+?)' + close, 'g')})type TextParseResult = {  expression: string,  tokens: Array<string | { '@binding': string }>}export functionparseText (  text: string,  delimiters?: [string, string]): TextParseResult | void {  // 检测文本是否包含变量 %%hello%%  const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE  if (!tagRE.test(text)) {    return  }  const tokens = []  const rawTokens = []  let lastIndex = tagRE.lastIndex = 0  let match, index, tokenValue  // tagRe.exec("hello {{name}}, I am {{age}}")  // 返回["{{name}}", "name", index: 6, input:'xxx']  //  while ((match = tagRE.exec(text))) {    index = match.index    // push text token    if (index > lastIndex) {      // 表示变量前面有纯文本      rawTokens.push(tokenValue = text.slice(lastIndex, index))      tokens.push(JSON.stringify(tokenValue))    }    // 表示文本一开始就是变量 {{hello}}name    // tag token    const exp = parseFilters(match[1].trim())    tokens.push(      _s(${exp})    )    rawTokens.push({ '@binding': exp })    // 更新lastIndex 保证在下一轮循环的时候，只从 }}后边再开始匹配    lastIndex = index + match[0].length  }  // 当剩下的text不再被正则匹配的时候，表示所有变量都已经处理完毕  // 此时如果lastIndex < text.length 表示在最后一个变量后还有文本  // 最后将后边的文本加入到tokents中  if (lastIndex < text.length) {    rawTokens.push(tokenValue = text.slice(lastIndex))    tokens.push(JSON.stringify(tokenValue))  }  return {    expression: tokens.join('+'),    tokens: rawTokens  }}

// ul称为静态根节点<ul>  <li>文本111</li>  <li>文本111</li>  <li>文本111</li>  <li>文本111</li>  <li>文本111</li></ul>

function markStatic (node: ASTNode) {  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    if (      !isPlatformReservedTag(node.tag) &&      node.tag !== 'slot' &&      node.attrsMap['inline-template'] == null    ) {      return    }    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等指令    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        }      }    }  }}

function markStaticRoots (node: ASTNode, isInFor: boolean) {  if (node.type === 1) {    if (node.static || node.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.    // 一个节点想要成为静态根节点    // 节点本身必须是静态节点    // 必须要拥有子节点children    // 子节点不能是只有一个文本节点    if (node.static && node.children.length && !(      node.children.length === 1 &&      node.children[0].type === 3    )) {      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)      }    }    if (node.ifConditions) {      for (let i = 1, l = node.ifConditions.length; i < l; i++) {        markStaticRoots(node.ifConditions[i].block, isInFor)      }    }  }}

<divid="NLRX"><p>Hello {{name}}</p></div>

ast = {    'type': 1,    'tag': 'div',    'attrsList': [        {            'name':'id',            'value':'NLRX',        }    ],    'attrsMap': {      'id': 'NLRX',    },    'static':false,    'parent': undefined,    'plain': false,    'children': [{      'type': 1,      'tag': 'p',      'plain': false,      'static':false,      'children': [        {            'type': 2,            'expression': '"Hello "+_s(name)',            'text': 'Hello {{name}}',            'static':false,        }      ]    }]}

_c('div', {attrs: {"id": "NLRX"}}, [/*子节点列表*/])

_c('div', {attrs: {"id": "NLRX"}}, [_c('p', {attrs:{}}, [/*子节点列表*/])])

_c('div', {attrs: {"id": "NLRX"}}, [_c('p', {attrs:{}}, [_v("Hello"+_s(name))])])

`with(this){  return _c(    'div',    {      attrs: {"id": "NLRX"},    },    [      _c(        'p',        {          attrs: {}        },        [          _v("hello"+_s(name))        ]      )    ]  )}`

res.render = createFunction(coplied.render, fnGenErrors)function createFunction(code, errors) {  try {    return new Function(code)  } catch (err) {    errors.push({err, code}),    return  }}

export function generate (  ast: ASTElement | void,  options: CompilerOptions): CodegenResult {  const state = new CodegenState(options)  const code = ast ? genElement(ast, state) : '_c("div")'  return {    render:         with(this){            return ${code}        },    staticRenderFns: state.staticRenderFns  }}

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)  } else if (el.for && !el.forProcessed) {    return genFor(el, state)  } else if (el.if && !el.ifProcessed) {    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))) {        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  }}

functiongenNormalElement(el, state, stringifyChildren) {  const data = el.plain ? undefined : genData(el, state)  const children = stringifyChildren    ? [${genChildrenAsStringNode(el, state)}]    : genSSRChildren(el, state, true)  return _c    (      '${el.tag}' ${     data ? , ${data}` : ''}$      {        children ? ,  ${children}  : ''  })`}

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'    ) {      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    return [${children.map(c =>        gen(c, state)).join(',')}]${ normalizationType ? ,${normalizationType}: ''     }  }}

function genNode (node: ASTNode, state: CodegenState): string {  if (node.type === 1) {    return genElement(node, state)  } else if (node.type === 3 && node.isComment) {    return genComment(node)  } else {    return genText(node)  }}

export function genText (text: ASTText | ASTExpression): string {  return _v(${text.type === 2     ? text.expression// no need for () because already wrapped in _s()     : transformSpecialNewlines(JSON.stringify(text.text))   })}

export function genComment (comment: ASTText): string {  return _e(${JSON.stringify(comment.text)})}

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  if (!options.render) {    let template = options.template    if (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 = template.innerHTML      } else {        if (process.env.NODE_ENV !== 'production') {          warn('invalid template option:' + template, this)        }        return this      }    } else if (el) {      template = getOuterHTML(el)    }    if (template) {      /* istanbul ignore if */      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {        mark('compile')      }      const { render, staticRenderFns } = compileToFunctions(template, {        outputSourceRange: process.env.NODE_ENV !== 'production',        shouldDecodeNewlines,        shouldDecodeNewlinesForHref,        delimiters: options.delimiters,        comments: options.comments      }, this)      options.render = render      options.staticRenderFns = staticRenderFns      /* istanbul ignore if */      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {        mark('compile end')        measure(vue ${this._name} compile, 'compile', 'compile end')      }    }  }  return mount.call(this, el, hydrating)}

export const createCompiler = createCompilerCreator(function baseCompile (  template: string,  options: CompilerOptions): CompiledResult {  // 模版解析节点，用正则等方式解析template模版中的指令、class、style等数据，生成ast  const ast = parse(template.trim(), options)  if (options.optimize !== false) {    // 第二阶段-优化阶段，遍历AST，找出其中的静态节点，并打上标记    optimize(ast, options)  }  // 第三阶段-代码生成阶段，将AST转换成渲染函数  const code = generate(ast, options)  return {    ast,    render: code.render,    staticRenderFns: code.staticRenderFns  }})