编译过程首先就是对模板做解析，生成 AST，它是一种抽象语法树，是对源代码的抽象语法结构的树状表现形式。在很多编译技术中，如 babel 编译 ES6 的代码都会先生成 AST
这个过程是比较复杂的，它会用到大量正则表达式对字符串解析

例子

  1. <ul :class="bindCls" class="list" v-if="isShow">
  2.     <li v-for="(item,index) in data" @click="clickItem(index)">{{item}}:{{index}}</li>
  3. </ul>

经过 parse 过程后，生成的 AST 如下

  1. ast = {
  2.   'type': 1,
  3.   'tag': 'ul',
  4.   'attrsList': [],
  5.   'attrsMap': {
  6.     ':class': 'bindCls',
  7.     'class': 'list',
  8.     'v-if': 'isShow'
  9.   },
  10.   'if': 'isShow',
  11.   'ifConditions': [{
  12.     'exp': 'isShow',
  13.     'block': // ul ast element
  14.   }],
  15.   'parent': undefined,
  16.   'plain': false,
  17.   'staticClass': 'list',
  18.   'classBinding': 'bindCls',
  19.   'children': [{
  20.     'type': 1,
  21.     'tag': 'li',
  22.     'attrsList': [{
  23.       'name': '@click',
  24.       'value': 'clickItem(index)'
  25.     }],
  26.     'attrsMap': {
  27.       '@click': 'clickItem(index)',
  28.       'v-for': '(item,index) in data'
  29.      },
  30.     'parent': // ul ast element
  31.     'plain': false,
  32.     'events': {
  33.       'click': {
  34.         'value': 'clickItem(index)'
  35.       }
  36.     },
  37.     'hasBindings': true,
  38.     'for': 'data',
  39.     'alias': 'item',
  40.     'iterator1': 'index',
  41.     'children': [
  42.       'type': 2,
  43.       'expression': '_s(item)+":"+_s(index)'
  44.       'text': '{{item}}:{{index}}',
  45.       'tokens': [
  46.         {'@binding':'item'},
  47.         ':',
  48.         {'@binding':'index'}
  49.       ]
  50.     ]
  51.   }]
  52. }

生成的 AST 是一个树状结构，每一个节点都是一个 ast element，除了它自身的一些属性，还维护了它的父子关系，如 parent 指向它的父节点，children 指向它的所有子节点

整体流程

parse定义在src/compiler/parser/index.js中

  1. /**
  2.  * Convert HTML string to AST.
  3.  */
  4. export function parse (
  5.   template: string,
  6.   options: CompilerOptions
  7. ): ASTElement | void {
  8.   warn = options.warn || baseWarn
  10.   platformIsPreTag = options.isPreTag || no
  11.   platformMustUseProp = options.mustUseProp || no
  12.   platformGetTagNamespace = options.getTagNamespace || no
  13.   const isReservedTag = options.isReservedTag || no
  14.   maybeComponent = (el: ASTElement) => !!(
  15.     el.component ||
  16.     el.attrsMap[':is'] ||
  17.     el.attrsMap['v-bind:is'] ||
  18.     !(el.attrsMap.is ? isReservedTag(el.attrsMap.is) : isReservedTag(el.tag))
  19.   )
  20.   transforms = pluckModuleFunction(options.modules, 'transformNode')
  21.   preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
  22.   postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
  24.   delimiters = options.delimiters
  26.   const stack = []
  27.   const preserveWhitespace = options.preserveWhitespace !== false
  28.   const whitespaceOption = options.whitespace
  29.   let root
  30.   let currentParent
  31.   let inVPre = false
  32.   let inPre = false
  33.   let warned = false
  35.   function warnOnce (msg, range) {
  36.     if (!warned) {
  37.       warned = true
  38.       warn(msg, range)
  39.     }
  40.   }
  42.   function closeElement (element) {
  43.     trimEndingWhitespace(element)
  44.     if (!inVPre && !element.processed) {
  45.       element = processElement(element, options)
  46.     }
  47.     // tree management
  48.     if (!stack.length && element !== root) {
  49.       // allow root elements with v-if, v-else-if and v-else
  50.       if (root.if && (element.elseif || element.else)) {
  51.         if (process.env.NODE_ENV !== 'production') {
  52.           checkRootConstraints(element)
  53.         }
  54.         addIfCondition(root, {
  55.           exp: element.elseif,
  56.           block: element
  57.         })
  58.       } else if (process.env.NODE_ENV !== 'production') {
  59.         warnOnce(
  60.           `Component template should contain exactly one root element. ` +
  61.           `If you are using v-if on multiple elements, ` +
  62.           `use v-else-if to chain them instead.`,
  63.           { start: element.start }
  64.         )
  65.       }
  66.     }
  67.     if (currentParent && !element.forbidden) {
  68.       if (element.elseif || element.else) {
  69.         processIfConditions(element, currentParent)
  70.       } else {
  71.         if (element.slotScope) {
  72.           // scoped slot
  73.           // keep it in the children list so that v-else(-if) conditions can
  74.           // find it as the prev node.
  75.           const name = element.slotTarget || '"default"'
  76.           ;(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element
  77.         }
  78.         currentParent.children.push(element)
  79.         element.parent = currentParent
  80.       }
  81.     }
  83.     // final children cleanup
  84.     // filter out scoped slots
  85.     element.children = element.children.filter(c => !(c: any).slotScope)
  86.     // remove trailing whitespace node again
  87.     trimEndingWhitespace(element)
  89.     // check pre state
  90.     if (element.pre) {
  91.       inVPre = false
  92.     }
  93.     if (platformIsPreTag(element.tag)) {
  94.       inPre = false
  95.     }
  96.     // apply post-transforms
  97.     for (let i = 0; i < postTransforms.length; i++) {
  98.       postTransforms[i](element, options)
  99.     }
  100.   }
  102.   function trimEndingWhitespace (el) {
  103.     // remove trailing whitespace node
  104.     if (!inPre) {
  105.       let lastNode
  106.       while (
  107.         (lastNode = el.children[el.children.length - 1]) &&
  108.         lastNode.type === 3 &&
  109.         lastNode.text === ' '
  110.       ) {
  111.         el.children.pop()
  112.       }
  113.     }
  114.   }
  116.   function checkRootConstraints (el) {
  117.     if (el.tag === 'slot' || el.tag === 'template') {
  118.       warnOnce(
  119.         `Cannot use <${el.tag}> as component root element because it may ` +
  120.         'contain multiple nodes.',
  121.         { start: el.start }
  122.       )
  123.     }
  124.     if (el.attrsMap.hasOwnProperty('v-for')) {
  125.       warnOnce(
  126.         'Cannot use v-for on stateful component root element because ' +
  127.         'it renders multiple elements.',
  128.         el.rawAttrsMap['v-for']
  129.       )
  130.     }
  131.   }
  133.   parseHTML(template, {
  134.     warn,
  135.     expectHTML: options.expectHTML,
  136.     isUnaryTag: options.isUnaryTag,
  137.     canBeLeftOpenTag: options.canBeLeftOpenTag,
  138.     shouldDecodeNewlines: options.shouldDecodeNewlines,
  139.     shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
  140.     shouldKeepComment: options.comments,
  141.     outputSourceRange: options.outputSourceRange,
  142.     start (tag, attrs, unary, start, end) {
  143.       // check namespace.
  144.       // inherit parent ns if there is one
  145.       const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)
  147.       // handle IE svg bug
  148.       /* istanbul ignore if */
  149.       if (isIE && ns === 'svg') {
  150.         attrs = guardIESVGBug(attrs)
  151.       }
  153.       let element: ASTElement = createASTElement(tag, attrs, currentParent)
  154.       if (ns) {
  155.         element.ns = ns
  156.       }
  158.       if (process.env.NODE_ENV !== 'production') {
  159.         if (options.outputSourceRange) {
  160.           element.start = start
  161.           element.end = end
  162.           element.rawAttrsMap = element.attrsList.reduce((cumulated, attr) => {
  163.             cumulated[attr.name] = attr
  164.             return cumulated
  165.           }, {})
  166.         }
  167.         attrs.forEach(attr => {
  168.           if (invalidAttributeRE.test(attr.name)) {
  169.             warn(
  170.               `Invalid dynamic argument expression: attribute names cannot contain ` +
  171.               `spaces, quotes, <, >, / or =.`,
  172.               {
  173.                 start: attr.start + attr.name.indexOf(`[`),
  174.                 end: attr.start + attr.name.length
  175.               }
  176.             )
  177.           }
  178.         })
  179.       }
  181.       if (isForbiddenTag(element) && !isServerRendering()) {
  182.         element.forbidden = true
  183.         process.env.NODE_ENV !== 'production' && warn(
  184.           'Templates should only be responsible for mapping the state to the ' +
  185.           'UI. Avoid placing tags with side-effects in your templates, such as ' +
  186.           `<${tag}>` + ', as they will not be parsed.',
  187.           { start: element.start }
  188.         )
  189.       }
  191.       // apply pre-transforms
  192.       for (let i = 0; i < preTransforms.length; i++) {
  193.         element = preTransforms[i](element, options) || element
  194.       }
  196.       if (!inVPre) {
  197.         processPre(element)
  198.         if (element.pre) {
  199.           inVPre = true
  200.         }
  201.       }
  202.       if (platformIsPreTag(element.tag)) {
  203.         inPre = true
  204.       }
  205.       if (inVPre) {
  206.         processRawAttrs(element)
  207.       } else if (!element.processed) {
  208.         // structural directives
  209.         processFor(element)
  210.         processIf(element)
  211.         processOnce(element)
  212.       }
  214.       if (!root) {
  215.         root = element
  216.         if (process.env.NODE_ENV !== 'production') {
  217.           checkRootConstraints(root)
  218.         }
  219.       }
  221.       if (!unary) {
  222.         currentParent = element
  223.         stack.push(element)
  224.       } else {
  225.         closeElement(element)
  226.       }
  227.     },
  229.     end (tag, start, end) {
  230.       const element = stack[stack.length - 1]
  231.       // pop stack
  232.       stack.length -= 1
  233.       currentParent = stack[stack.length - 1]
  234.       if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
  235.         element.end = end
  236.       }
  237.       closeElement(element)
  238.     },
  240.     chars (text: string, start: number, end: number) {
  241.       if (!currentParent) {
  242.         if (process.env.NODE_ENV !== 'production') {
  243.           if (text === template) {
  244.             warnOnce(
  245.               'Component template requires a root element, rather than just text.',
  246.               { start }
  247.             )
  248.           } else if ((text = text.trim())) {
  249.             warnOnce(
  250.               `text "${text}" outside root element will be ignored.`,
  251.               { start }
  252.             )
  253.           }
  254.         }
  255.         return
  256.       }
  257.       // IE textarea placeholder bug
  258.       /* istanbul ignore if */
  259.       if (isIE &&
  260.         currentParent.tag === 'textarea' &&
  261.         currentParent.attrsMap.placeholder === text
  262.       ) {
  263.         return
  264.       }
  265.       const children = currentParent.children
  266.       if (inPre || text.trim()) {
  267.         text = isTextTag(currentParent) ? text : decodeHTMLCached(text)
  268.       } else if (!children.length) {
  269.         // remove the whitespace-only node right after an opening tag
  270.         text = ''
  271.       } else if (whitespaceOption) {
  272.         if (whitespaceOption === 'condense') {
  273.           // in condense mode, remove the whitespace node if it contains
  274.           // line break, otherwise condense to a single space
  275.           text = lineBreakRE.test(text) ? '' : ' '
  276.         } else {
  277.           text = ' '
  278.         }
  279.       } else {
  280.         text = preserveWhitespace ? ' ' : ''
  281.       }
  282.       if (text) {
  283.         if (!inPre && whitespaceOption === 'condense') {
  284.           // condense consecutive whitespaces into single space
  285.           text = text.replace(whitespaceRE, ' ')
  286.         }
  287.         let res
  288.         let child: ?ASTNode
  289.         if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
  290.           child = {
  291.             type: 2,
  292.             expression: res.expression,
  293.             tokens: res.tokens,
  294.             text
  295.           }
  296.         } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
  297.           child = {
  298.             type: 3,
  299.             text
  300.           }
  301.         }
  302.         if (child) {
  303.           if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
  304.             child.start = start
  305.             child.end = end
  306.           }
  307.           children.push(child)
  308.         }
  309.       }
  310.     },
  311.     comment (text: string, start, end) {
  312.       // adding anything as a sibling to the root node is forbidden
  313.       // comments should still be allowed, but ignored
  314.       if (currentParent) {
  315.         const child: ASTText = {
  316.           type: 3,
  317.           text,
  318.           isComment: true
  319.         }
  320.         if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
  321.           child.start = start
  322.           child.end = end
  323.         }
  324.         currentParent.children.push(child)
  325.       }
  326.     }
  327.   })
  328.   return root
  329. }

从options中获取方法和配置

parse函数的输入是template和options（和平台相关的一些配置），输出是AST的根节点（模板字符串）
定义在src/platforms/web/compiler/options中
放到这个目录是因为它们在不同的平台（web和weex）的实现是不同的

  1. import {
  2.   isPreTag,
  3.   mustUseProp,
  4.   isReservedTag,
  5.   getTagNamespace
  6. } from '../util/index'
  8. import modules from './modules/index'
  9. import directives from './directives/index'
  10. import { genStaticKeys } from 'shared/util'
  11. import { isUnaryTag, canBeLeftOpenTag } from './util'
  13. export const baseOptions: CompilerOptions = {
  14.   expectHTML: true,
  15.   modules,
  16.   directives,
  17.   isPreTag,
  18.   isUnaryTag,
  19.   mustUseProp,
  20.   canBeLeftOpenTag,
  21.   isReservedTag,
  22.   getTagNamespace,
  23.   staticKeys: genStaticKeys(modules)
  24. }

实现

  1. warn = options.warn || baseWarn
  3. platformIsPreTag = options.isPreTag || no
  4. platformMustUseProp = options.mustUseProp || no
  5. platformGetTagNamespace = options.getTagNamespace || no
  6. const isReservedTag = options.isReservedTag || no
  7. maybeComponent = (el: ASTElement) => !!(
  8.   el.component ||
  9.   el.attrsMap[':is'] ||
  10.   el.attrsMap['v-bind:is'] ||
  11.   !(el.attrsMap.is ? isReservedTag(el.attrsMap.is) : isReservedTag(el.tag))
  12. )
  13. transforms = pluckModuleFunction(options.modules, 'transformNode')
  14. preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
  15. postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
  17. delimiters = options.delimiters

解析 HTML 模板

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

  1. export function parseHTML (html, options) {
  2.   const stack = []
  3.   const expectHTML = options.expectHTML
  4.   const isUnaryTag = options.isUnaryTag || no
  5.   const canBeLeftOpenTag = options.canBeLeftOpenTag || no
  6.   let index = 0
  7.   let last, lastTag
  8.   while (html) {
  9.     last = html
  10.     // Make sure we're not in a plaintext content element like script/style
  11.     if (!lastTag || !isPlainTextElement(lastTag)) {
  12.       let textEnd = html.indexOf('<')
  13.       if (textEnd === 0) {
  14.         // Comment: 注释节点和文档类型节点
  15.         // 对于注释节点和文档类型节点的匹配，如果匹配到做前进即可
  16.         if (comment.test(html)) {
  17.           const commentEnd = html.indexOf('-->')
  19.           if (commentEnd >= 0) {
  20.             if (options.shouldKeepComment) {
  21.               options.comment(html.substring(4, commentEnd), index, index + commentEnd + 3)
  22.             }
  23.             // 对于注释节点，前进至它们的末尾位置
  24.             advance(commentEnd + 3)
  25.             continue
  26.           }
  27.         }
  29.         // http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
  30.         if (conditionalComment.test(html)) {
  31.           const conditionalEnd = html.indexOf(']>')
  33.           if (conditionalEnd >= 0) {
  34.             // 对于条件注释节点，前进至它们的末尾位置
  35.             advance(conditionalEnd + 2)
  36.             continue
  37.           }
  38.         }
  40.         // Doctype:
  41.         const doctypeMatch = html.match(doctype)
  42.         if (doctypeMatch) {
  43.           // 对于文档类型节点，则前进它自身长度的距离
  44.           advance(doctypeMatch[0].length)
  45.           continue
  46.         }
  48.         // End tag: 结束标签
  49.         const endTagMatch = html.match(endTag) // 通过正则endTag匹配到闭合标签
  50.         if (endTagMatch) {
  51.           const curIndex = index
  52.           advance(endTagMatch[0].length) // 前进到闭合标签末尾
  53.           parseEndTag(endTagMatch[1], curIndex, index) // 对闭合标签做解析
  54.           continue
  55.         }
  57.         // Start tag: 开始标签
  58.         const startTagMatch = parseStartTag() // 解析开始标签
  59.         if (startTagMatch) {
  60.           handleStartTag(startTagMatch)
  61.           if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) {
  62.             advance(1)
  63.           }
  64.           continue
  65.         }
  66.       }
  68.       // 文本
  69.       let text, rest, next
  70.       if (textEnd >= 0) { // 满足则说明从当前位置到textEnd位置都是文本
  71.         rest = html.slice(textEnd)
  72.         while (
  73.           !endTag.test(rest) &&
  74.           !startTagOpen.test(rest) &&
  75.           !comment.test(rest) &&
  76.           !conditionalComment.test(rest)
  77.         ) {
  78.           // < in plain text, be forgiving and treat it as text
  79.           // 如果 < 是纯文本的字符就继续找到真正的文本结束的位置
  80.           next = rest.indexOf('<', 1)
  81.           if (next < 0) break
  82.           textEnd += next
  83.           rest = html.slice(textEnd)
  84.         }
  85.         text = html.substring(0, textEnd) // 前进到结束的位置
  86.       }
  88.       if (textEnd < 0) { // 满足则说明整个template解析完毕了，把剩余的html都赋值给了text
  89.         text = html
  90.       }
  92.       if (text) {
  93.         advance(text.length)
  94.       }
  96.       // 调用options.chars回调函数并传text参数
  97.       if (options.chars && text) {
  98.         options.chars(text, index - text.length, index)
  99.       }
  100.     } else {
  101.       let endTagLength = 0
  102.       const stackedTag = lastTag.toLowerCase()
  103.       const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i'))
  104.       const rest = html.replace(reStackedTag, function (all, text, endTag) {
  105.         endTagLength = endTag.length
  106.         if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
  107.           text = text
  108.             .replace(/<!\--([\s\S]*?)-->/g, '$1') // #7298
  109.             .replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1')
  110.         }
  111.         if (shouldIgnoreFirstNewline(stackedTag, text)) {
  112.           text = text.slice(1)
  113.         }
  114.         if (options.chars) {
  115.           options.chars(text)
  116.         }
  117.         return ''
  118.       })
  119.       index += html.length - rest.length
  120.       html = rest
  121.       parseEndTag(stackedTag, index - endTagLength, index)
  122.     }
  124.     if (html === last) {
  125.       options.chars && options.chars(html)
  126.       if (process.env.NODE_ENV !== 'production' && !stack.length && options.warn) {
  127.         options.warn(`Mal-formatted tag at end of template: "${html}"`, { start: index + html.length })
  128.       }
  129.       break
  130.     }
  131.   }
  133.   // Clean up any remaining tags
  134.   parseEndTag()
  136.   function advance (n) {
  137.     index += n
  138.     html = html.substring(n)
  139.   }
  141.   // 解析开始标签
  142.   function parseStartTag () {
  143.     // 通过正则匹配到开始标签
  144.     const start = html.match(startTagOpen)
  145.     if (start) {
  146.       // 定义match对象
  147.       const match = {
  148.         tagName: start[1],
  149.         attrs: [],
  150.         start: index
  151.       }
  152.       advance(start[0].length)
  153.       let end, attr
  154.       // 循环去匹配开始标签中的属性并添加到match.attrs中，直到匹配的开始标签的闭合符结束
  155.       while (!(end = html.match(startTagClose)) && (attr = html.match(dynamicArgAttribute) || html.match(attribute))) {
  156.         attr.start = index
  157.         advance(attr[0].length)
  158.         attr.end = index
  159.         match.attrs.push(attr)
  160.       }
  161.       // 匹配到闭合符则获取一元斜线符，前进到闭合符尾，并把当前索引赋值给match.end
  162.       if (end) {
  163.         match.unarySlash = end[1]
  164.         advance(end[0].length)
  165.         match.end = index
  166.         return match
  167.       }
  168.     }
  169.   }
  171.   // 对match处理
  172.   function handleStartTag (match) {
  173.     const tagName = match.tagName
  174.     const unarySlash = match.unarySlash
  176.     if (expectHTML) {
  177.       if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
  178.         parseEndTag(lastTag)
  179.       }
  180.       if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
  181.         parseEndTag(tagName)
  182.       }
  183.     }
  184.         // 判断开始标签是否是一元标签，类似<img>、<br />
  185.     const unary = isUnaryTag(tagName) || !!unarySlash
  186.         // 对match.attrs遍历并做了一些处理
  187.     const l = match.attrs.length
  188.     const attrs = new Array(l)
  189.     for (let i = 0; i < l; i++) {
  190.       const args = match.attrs[i]
  191.       const value = args[3] || args[4] || args[5] || ''
  192.       const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
  193.         ? options.shouldDecodeNewlinesForHref
  194.         : options.shouldDecodeNewlines
  195.       attrs[i] = {
  196.         name: args[1],
  197.         value: decodeAttr(value, shouldDecodeNewlines)
  198.       }
  199.       if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
  200.         attrs[i].start = args.start + args[0].match(/^\s*/).length
  201.         attrs[i].end = args.end
  202.       }
  203.     }
  204.         // 非一元标签，则往stack里push一个对象，并且把tagName赋值给lastTag
  205.     if (!unary) {
  206.       stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
  207.       lastTag = tagName
  208.     }
  209.         // 调用options.start回调函数并传入一些参数
  210.     if (options.start) {
  211.       options.start(tagName, attrs, unary, match.start, match.end)
  212.     }
  213.   }
  215.   // 对闭合标签做解析
  216.   // 倒序stack,就是找到第一个和当前endTag匹配的元素
  217.   function parseEndTag (tagName, start, end) {
  218.     let pos, lowerCasedTagName
  219.     if (start == null) start = index
  220.     if (end == null) end = index
  222.     // Find the closest opened tag of the same type
  223.     if (tagName) {
  224.       lowerCasedTagName = tagName.toLowerCase()
  225.       for (pos = stack.length - 1; pos >= 0; pos--) {
  226.         if (stack[pos].lowerCasedTag === lowerCasedTagName) {
  227.           break
  228.         }
  229.       }
  230.     } else {
  231.       // If no tag name is provided, clean shop
  232.       pos = 0
  233.     }
  235.     if (pos >= 0) {
  236.       // Close all the open elements, up the stack
  237.       for (let i = stack.length - 1; i >= pos; i--) {
  238.         if (process.env.NODE_ENV !== 'production' &&
  239.           (i > pos || !tagName) &&
  240.           options.warn
  241.         ) {
  242.           options.warn(
  243.             `tag <${stack[i].tag}> has no matching end tag.`,
  244.             { start: stack[i].start, end: stack[i].end }
  245.           )
  246.         }
  247.         if (options.end) {
  248.           options.end(stack[i].tag, start, end)
  249.         }
  250.       }
  252.       // Remove the open elements from the stack
  253.       stack.length = pos
  254.       lastTag = pos && stack[pos - 1].tag
  255.     } else if (lowerCasedTagName === 'br') {
  256.       if (options.start) {
  257.         options.start(tagName, [], true, start, end)
  258.       }
  259.     } else if (lowerCasedTagName === 'p') {
  260.       if (options.start) {
  261.         options.start(tagName, [], false, start, end)
  262.       }
  263.       if (options.end) {
  264.         options.end(tagName, start, end)
  265.       }
  266.     }
  267.   }
  268. }

循环解析 template ，用正则做各种匹配，对于不同情况分别进行不同的处理，直到整个 template 被解析完毕。 在匹配的过程中会利用 advance 函数不断前进整个模板字符串，直到字符串末尾

advance 函数

  1. function advance (n) {
  2.   index += n
  3.   html = html.substring(n)
  4. }

advance-1.png

  1. advance(4)

advance-2.png

匹配的过程中主要利用了正则表达式

  1. // Regular Expressions for parsing tags and attributes
  2. // 匹配文档类型节点
  3. const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
  4. const dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
  5. const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`
  6. const qnameCapture = `((?:${ncname}\\:)?${ncname})`
  7. // 匹配开始闭合标签
  8. const startTagOpen = new RegExp(`^<${qnameCapture}`)
  9. const startTagClose = /^\s*(\/?)>/
  10. const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
  11. const doctype = /^<!DOCTYPE [^>]+>/i
  12. // #7298: escape - to avoid being passed as HTML comment when inlined in page
  13. // 匹配注释节点
  14. const comment = /^<!\--/
  15. const conditionalComment = /^<!\[/

闭合标签
对于非一元标签（有 endTag）我们都把它构造成一个对象压入到 stack 中
stack.png
对于闭合标签的解析，就是倒序 stack，找到第一个和当前 endTag 匹配的元素
如果是正常的标签匹配，那么 stack 的最后一个元素应该和当前的 endTag 匹配
考虑到如下错误情况

  1. <div><span></div>

当 endTag 为 的时候，从 stack 尾部找到的标签是 ，就不能匹配，因此这种情况会报警告。匹配后把栈到 pos 位置的都弹出，并从 stack 尾部拿到 lastTag

处理开始标签

当解析到开始标签的时候，最后会执行 start 回调函数，函数主要就做 3 件事情

  1. 创建 AST 元素
  2. 处理 AST 元素
  3. AST 树管理

    创建AST元素

    ```javascript // 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) } // 通过createASTElement方法去创建一个AST元素，并添加namespace let element: ASTElement = createASTElement(tag, attrs, currentParent) if (ns) { element.ns = ns }

  1. 每一个AST元素就是一个普通的JavaScript对象
  2. ```javascript
  3. export function createASTElement (
  4.   tag: string,
  5.   attrs: Array<ASTAttr>,
  6.   parent: ASTElement | void
  7. ): ASTElement {
  8.   return {
  9.     type: 1, // AST元素类型
  10.     tag, // 标签名
  11.     attrsList: attrs, // 属性列表
  12.     attrsMap: makeAttrsMap(attrs), // 属性映射表
  13.     rawAttrsMap: {}, // 初始的属性映射表
  14.     parent, // 父的AST元素
  15.     children: [] // 子AST元素集合
  16.   }
  17. }

处理AST元素

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 }
  )
}

// apply pre-transforms
// 对模块preTransforms调用
for (let i = 0; i < preTransforms.length; i++) {
  element = preTransforms[i](element, options) || element
}
// 判断element是否包含各种指令通过processXXX做相应处理，处理的结果就是扩展AST元素的属性
if (!inVPre) {
  processPre(element)
  if (element.pre) {
    inVPre = true
  }
}
if (platformIsPreTag(element.tag)) {
  inPre = true
}
if (inVPre) {
  processRawAttrs(element)
} else if (!element.processed) {
  // structural directives
  processFor(element)
  processIf(element)
  processOnce(element)
}

processFor

export function processFor (el: ASTElement) {
  let exp
  // 从元素中拿到v-for指令的内容
  if ((exp = getAndRemoveAttr(el, 'v-for'))) {
    const res = parseFor(exp)
    if (res) {
      extend(el, res)
    } else if (process.env.NODE_ENV !== 'production') {
      warn(
        `Invalid v-for expression: ${exp}`,
        el.rawAttrsMap['v-for']
      )
    }
  }
}

export const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
export const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
const stripParensRE = /^\(|\)$/g
// 分别解析出for、alias、iterator1、iterator2等属性的值添加到AST的元素上
// v-for="(item,index) in data" 而言，解析出的的 for 是 data，alias 是 item，iterator1 是 index，没有 iterator2
export function parseFor (exp: string): ?ForParseResult {
  const inMatch = exp.match(forAliasRE)
  if (!inMatch) return
  const res = {}
  res.for = inMatch[2].trim()
  const alias = inMatch[1].trim().replace(stripParensRE, '')
  const iteratorMatch = alias.match(forIteratorRE)
  if (iteratorMatch) {
    res.alias = alias.replace(forIteratorRE, '').trim()
    res.iterator1 = iteratorMatch[1].trim()
    if (iteratorMatch[2]) {
      res.iterator2 = iteratorMatch[2].trim()
    }
  } else {
    res.alias = alias
  }
  return res
}

processIf

function processIf (el) {
  // 从元素中拿v-if指令的内容
  const exp = getAndRemoveAttr(el, 'v-if')
  // 给AST元素添加if属性和ifConditions属性
  if (exp) {
    el.if = exp
    addIfCondition(el, {
      exp: exp,
      block: el
    })
  } else { // 尝试拿v-else指令及v-else-if指令的内容
    // 拿到则给AST元素分别添加else和elseif属性
    if (getAndRemoveAttr(el, 'v-else') != null) {
      el.else = true 
    }
    const elseif = getAndRemoveAttr(el, 'v-else-if')
    if (elseif) {
      el.elseif = elseif
    }
  }
}

export function addIfCondition (el: ASTElement, condition: ASTIfCondition) {
  if (!el.ifConditions) {
    el.ifConditions = []
  }
  el.ifConditions.push(condition)
}

AST树管理

在处理开始标签的时候为每一个标签创建了一个 AST 元素，在不断解析模板创建 AST 元素的时候，也要为它们建立父子关系，就像 DOM 元素的父子关系那样
AST 树管理的目标是构建一颗 AST 树，本质上它要维护 root 根节点和当前父节点 currentParent
为了保证元素可以正确闭合，这里也利用了 stack栈的数据结构

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']
    )
  }
}

function closeElement (element) {
  trimEndingWhitespace(element)
  if (!inVPre && !element.processed) {
    element = processElement(element, options)
  }
  // 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 }
      )
    }
  }
  // 处理开始标签时判断如果有currentParent就把当前AST元素push到currentParent.children中，同时把AST元素的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
    }
  }

  // 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
  }
  // apply post-transforms
  for (let i = 0; i < postTransforms.length; i++) {
    postTransforms[i](element, options)
  }
}

stack 和 currentParent 除了在处理开始标签的时候会变化，在处理闭合标签的时候也会变化，因此整个 AST 树管理要结合闭合标签的处理逻辑看

处理闭合标签

当解析到闭合标签时会执行end回调函数

end (tag, start, end) {
  const element = stack[stack.length - 1]
  // pop stack
  stack.length -= 1
  currentParent = stack[stack.length - 1] // 把stack最后一个元素赋值给currentParent，保证当遇到闭合标签时可以正确更新stack的长度以及currentParent的值，这样来维护整个AST树
  if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
    element.end = end
  }
  closeElement(element)
},

closeElement(element)：更新一下 inVPre 和 inPre 的状态，以及执行 postTransforms 函数

function closeElement (element) {
  trimEndingWhitespace(element)
  if (!inVPre && !element.processed) {
    element = processElement(element, options)
  }
  // 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 }
      )
    }
  }
  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
    }
  }

  // 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
  }
  // apply post-transforms
  for (let i = 0; i < postTransforms.length; i++) {
    postTransforms[i](element, options)
  }
}

处理文本内容

文本构造的 AST 元素有 2 种类型，一种是有表达式的，type 为 2，一种是纯文本，type 为 3

chars (text: string, start: number, end: number) {
  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()) {
    text = isTextTag(currentParent) ? text : decodeHTMLCached(text)
  } else if (!children.length) {
    // 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 ? ' ' : ''
  }
  if (text) {
    if (!inPre && whitespaceOption === 'condense') {
      // condense consecutive whitespaces into single space
      text = text.replace(whitespaceRE, ' ')
    }
    let res
    let child: ?ASTNode
    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
      }
    }
    if (child) {
      if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
        child.start = start
        child.end = end
      }
      children.push(child)
    }
  }
},

表达式调用parseText(text, delimiters)对文本解析
定义在src/compiler/parser/text-parser.js中

const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g
const regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/g

export function parseText (
  text: string,
  delimiters?: [string, string]
): TextParseResult | void {
  // 根据分隔符（默认是{{}}）构造了文本匹配的正则表达式
  const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE
  if (!tagRE.test(text)) {
    return
  }
  const tokens = []
  const rawTokens = []
  let lastIndex = tagRE.lastIndex = 0
  let match, index, tokenValue
  // 循环匹配文本
  while ((match = tagRE.exec(text))) {
    index = match.index
    // push text token
    // 遇到普通文本就push到rawTokens和tokens中
    if (index > lastIndex) {
      rawTokens.push(tokenValue = text.slice(lastIndex, index))
      tokens.push(JSON.stringify(tokenValue))
    }
    // tag token
    // 遇到表达式就转换成_s(${exp}) push到tokens中  转换成{@binging:exp} push到rawTokens中
    const exp = parseFilters(match[1].trim())
    tokens.push(`_s(${exp})`)
    rawTokens.push({ '@binding': exp })
    lastIndex = index + match[0].length
  }
  if (lastIndex < text.length) {
    rawTokens.push(tokenValue = text.slice(lastIndex))
    tokens.push(JSON.stringify(tokenValue))
  }
  return {
    expression: tokens.join('+'),
    tokens: rawTokens
  }
}

对于例子
tokens 就是 [_s(item),’”:”‘,_s(index)]；rawTokens 就是 [{‘@binding’:’item’},’:’,{‘@binding’:’index’}]

return {
 expression: '_s(item)+":"+_s(index)',
 tokens: [{'@binding':'item'},':',{'@binding':'index'}]
}

流程图

parse.png

AST 元素节点总共有 3 种类型，type 为 1 表示是普通元素，为 2 表示是表达式，为 3 表示是纯文本