parse

编译过程首先就是对模板做解析，生成 AST，它是一种抽象语法树，是对源代码的抽象语法结构的树状表现形式。在很多编译技术中，如 babel 编译 ES6 的代码都会先生成 AST。

这个过程是比较复杂的，它会用到大量正则表达式对字符串解析，如果对正则不是很了解，建议先去补习正则表达式的知识。为了直观地演示 parse 的过程，我们先来看一个例子：

  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 指向它的所有子节点。先对 AST 有一些直观的印象，那么接下来我们来分析一下这个 AST 是如何得到的。

整体流程

首先来看一下 parse 的定义，在 src/compiler/parser/index.js 中：

  1. export function parse (
  2.   template: string,
  3.   options: CompilerOptions
  4. ): ASTElement | void {
  5.   getFnsAndConfigFromOptions(options)
  7.   parseHTML(template, {
  8.     // options ...
  9.     start (tag, attrs, unary) {
  10.       let element = createASTElement(tag, attrs)
  11.       processElement(element)
  12.       treeManagement()
  13.     },
  15.     end () {
  16.       treeManagement()
  17.       closeElement()
  18.     },
  20.     chars (text: string) {
  21.       handleText()
  22.       createChildrenASTOfText()
  23.     },
  24.     comment (text: string) {
  25.       createChildrenASTOfComment()
  26.     }
  27.   })
  28.   return astRootElement
  29. }

parse 函数的代码很长，贴一遍对同学的理解没有好处，我先把它拆成伪代码的形式，方便同学们对整体流程先有一个大致的了解。接下来我们就来分解分析每段伪代码的作用。

从 options 中获取方法和配置

对应伪代码：

  1. getFnsAndConfigFromOptions(options)

parse 函数的输入是 template 和 options，输出是 AST 的根节点。template 就是我们的模板字符串，而 options 实际上是和平台相关的一些配置，它的定义在 src/platforms/web/compiler/options 中：

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

这些属性和方法之所以放到 platforms 目录下是因为它们在不同的平台（web 和 weex）的实现是不同的。

我们用伪代码 getFnsAndConfigFromOptions 表示了这一过程，它的实际代码如下：

  1. warn = options.warn || baseWarn
  3. platformIsPreTag = options.isPreTag || no
  4. platformMustUseProp = options.mustUseProp || no
  5. platformGetTagNamespace = options.getTagNamespace || no
  7. transforms = pluckModuleFunction(options.modules, 'transformNode')
  8. preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
  9. postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
  11. delimiters = options.delimiters

这些方法和配置都是后续解析时候需要的，可以不用去管它们的具体作用，我们先往后看。

解析 HTML 模板

对应伪代码：

  1. parseHTML(template, options)

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

  1. export function parseHTML (html, options) {
  2.   let lastTag
  3.   while (html) {
  4.     if (!lastTag || !isPlainTextElement(lastTag)){
  5.       let textEnd = html.indexOf('<')
  6.       if (textEnd === 0) {
  7.          if(matchComment) {
  8.            advance(commentLength)
  9.            continue
  10.          }
  11.          if(matchDoctype) {
  12.            advance(doctypeLength)
  13.            continue
  14.          }
  15.          if(matchEndTag) {
  16.            advance(endTagLength)
  17.            parseEndTag()
  18.            continue
  19.          }
  20.          if(matchStartTag) {
  21.            parseStartTag()
  22.            handleStartTag()
  23.            continue
  24.          }
  25.       }
  26.       handleText()
  27.       advance(textLength)
  28.     } else {
  29.        handlePlainTextElement()
  30.        parseEndTag()
  31.     }
  32.   }
  33. }

由于 parseHTML 的逻辑也非常复杂，因此我也用了伪代码的方式表达，整体来说它的逻辑就是循环解析 template ，用正则做各种匹配，对于不同情况分别进行不同的处理，直到整个 template 被解析完毕。在匹配的过程中会利用 advance 函数不断前进整个模板字符串，直到字符串末尾。

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

为了更加直观地说明 advance 的作用，可以通过一副图表示：
parse - 图1
调用 advance 函数：

  1. advance(4)

得到结果：
parse - 图2
匹配的过程中主要利用了正则表达式，如下：

  1. const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
  2. const ncname = '[a-zA-Z_][\\w\\-\\.]*'
  3. const qnameCapture = `((?:${ncname}\\:)?${ncname})`
  4. const startTagOpen = new RegExp(`^<${qnameCapture}`)
  5. const startTagClose = /^\s*(\/?)>/
  6. const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
  7. const doctype = /^<!DOCTYPE [^>]+>/i
  8. const comment = /^<!\--/
  9. const conditionalComment = /^<!\[/

通过这些正则表达式，我们可以匹配注释节点、文档类型节点、开始闭合标签等。

  • 注释节点、文档类型节点
    对于注释节点和文档类型节点的匹配，如果匹配到我们仅仅做的是做前进即可。
  1. if (comment.test(html)) {
  2.   const commentEnd = html.indexOf('-->')
  4.   if (commentEnd >= 0) {
  5.     if (options.shouldKeepComment) {
  6.       options.comment(html.substring(4, commentEnd))
  7.     }
  8.     advance(commentEnd + 3)
  9.     continue
  10.   }
  11. }
  13. if (conditionalComment.test(html)) {
  14.   const conditionalEnd = html.indexOf(']>')
  16.   if (conditionalEnd >= 0) {
  17.     advance(conditionalEnd + 2)
  18.     continue
  19.   }
  20. }
  22. const doctypeMatch = html.match(doctype)
  23. if (doctypeMatch) {
  24.   advance(doctypeMatch[0].length)
  25.   continue
  26. }

对于注释和条件注释节点，前进至它们的末尾位置；对于文档类型节点，则前进它自身长度的距离。

  • 开始标签
  1. const startTagMatch = parseStartTag()
  2. if (startTagMatch) {
  3.   handleStartTag(startTagMatch)
  4.   if (shouldIgnoreFirstNewline(lastTag, html)) {
  5.     advance(1)
  6.   }
  7.   continue
  8. }

首先通过 parseStartTag 解析开始标签：

  1. function parseStartTag () {
  2.   const start = html.match(startTagOpen)
  3.   if (start) {
  4.     const match = {
  5.       tagName: start[1],
  6.       attrs: [],
  7.       start: index
  8.     }
  9.     advance(start[0].length)
  10.     let end, attr
  11.     while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
  12.       advance(attr[0].length)
  13.       match.attrs.push(attr)
  14.     }
  15.     if (end) {
  16.       match.unarySlash = end[1]
  17.       advance(end[0].length)
  18.       match.end = index
  19.       return match
  20.     }
  21.   }
  22. }

对于开始标签，除了标签名之外，还有一些标签相关的属性。函数先通过正则表达式 startTagOpen 匹配到开始标签，然后定义了 match 对象，接着循环去匹配开始标签中的属性并添加到 match.attrs 中，直到匹配的开始标签的闭合符结束。如果匹配到闭合符，则获取一元斜线符，前进到闭合符尾，并把当前索引赋值给 match.end。

parseStartTag 对开始标签解析拿到 match 后，紧接着会执行 handleStartTag 对 match 做处理：

  1. function handleStartTag (match) {
  2.   const tagName = match.tagName
  3.   const unarySlash = match.unarySlash
  5.   if (expectHTML) {
  6.     if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
  7.       parseEndTag(lastTag)
  8.     }
  9.     if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
  10.       parseEndTag(tagName)
  11.     }
  12.   }
  14.   const unary = isUnaryTag(tagName) || !!unarySlash
  16.   const l = match.attrs.length
  17.   const attrs = new Array(l)
  18.   for (let i = 0; i < l; i++) {
  19.     const args = match.attrs[i]
  20.     if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('""') === -1) {
  21.       if (args[3] === '') { delete args[3] }
  22.       if (args[4] === '') { delete args[4] }
  23.       if (args[5] === '') { delete args[5] }
  24.     }
  25.     const value = args[3] || args[4] || args[5] || ''
  26.     const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
  27.       ? options.shouldDecodeNewlinesForHref
  28.       : options.shouldDecodeNewlines
  29.     attrs[i] = {
  30.       name: args[1],
  31.       value: decodeAttr(value, shouldDecodeNewlines)
  32.     }
  33.   }
  35.   if (!unary) {
  36.     stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs })
  37.     lastTag = tagName
  38.   }
  40.   if (options.start) {
  41.     options.start(tagName, attrs, unary, match.start, match.end)
  42.   }
  43. }

handleStartTag 的核心逻辑很简单，先判断开始标签是否是一元标签，类似 <img>、<br/> 这样，接着对 match.attrs 遍历并做了一些处理，最后判断如果非一元标签，则往 stack 里 push 一个对象，并且把 tagName 赋值给 lastTag。至于 stack 的作用，稍后我会介绍。

最后调用了 options.start 回调函数，并传入一些参数，这个回调函数的作用稍后我会详细介绍。

  • 闭合标签
  1. const endTagMatch = html.match(endTag)
  2. if (endTagMatch) {
  3.   const curIndex = index
  4.   advance(endTagMatch[0].length)
  5.   parseEndTag(endTagMatch[1], curIndex, index)
  6.   continue
  7. }

先通过正则 endTag 匹配到闭合标签，然后前进到闭合标签末尾，然后执行 parseEndTag 方法对闭合标签做解析。

  2. function parseEndTag (tagName, start, end) {
  3.   let pos, lowerCasedTagName
  4.   if (start == null) start = index
  5.   if (end == null) end = index
  7.   if (tagName) {
  8.     lowerCasedTagName = tagName.toLowerCase()
  9.   }
  11.   if (tagName) {
  12.     for (pos = stack.length - 1; pos >= 0; pos--) {
  13.       if (stack[pos].lowerCasedTag === lowerCasedTagName) {
  14.         break
  15.       }
  16.     }
  17.   } else {
  18.     pos = 0
  19.   }
  21.   if (pos >= 0) {
  22.     for (let i = stack.length - 1; i >= pos; i--) {
  23.       if (process.env.NODE_ENV !== 'production' &&
  24.         (i > pos || !tagName) &&
  25.         options.warn
  26.       ) {
  27.         options.warn(
  28.           `tag <${stack[i].tag}> has no matching end tag.`
  29.         )
  30.       }
  31.       if (options.end) {
  32.         options.end(stack[i].tag, start, end)
  33.       }
  34.     }
  35.     stack.length = pos
  36.     lastTag = pos && stack[pos - 1].tag
  37.   } else if (lowerCasedTagName === 'br') {
  38.     if (options.start) {
  39.       options.start(tagName, [], true, start, end)
  40.     }
  41.   } else if (lowerCasedTagName === 'p') {
  42.     if (options.start) {
  43.       options.start(tagName, [], false, start, end)
  44.     }
  45.     if (options.end) {
  46.       options.end(tagName, start, end)
  47.     }
  48.   }
  49. }

parseEndTag 的核心逻辑很简单，在介绍之前我们回顾一下在执行 handleStartTag 的时候，对于非一元标签（有 endTag）我们都把它构造成一个对象压入到 stack 中，如图所示：
parse - 图3
那么对于闭合标签的解析，就是倒序 stack，找到第一个和当前 endTag 匹配的元素。如果是正常的标签匹配，那么 stack 的最后一个元素应该和当前的 endTag 匹配，但是考虑到如下错误情况：

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

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

最后调用了 options.end 回调函数，并传入一些参数，这个回调函数的作用稍后我会详细介绍。

  • 文本
  1. let text, rest, next
  2. if (textEnd >= 0) {
  3.   rest = html.slice(textEnd)
  4.   while (
  5.     !endTag.test(rest) &&
  6.     !startTagOpen.test(rest) &&
  7.     !comment.test(rest) &&
  8.     !conditionalComment.test(rest)
  9.   ) {
  10.     next = rest.indexOf('<', 1)
  11.     if (next < 0) break
  12.     textEnd += next
  13.     rest = html.slice(textEnd)
  14.   }
  15.   text = html.substring(0, textEnd)
  16.   advance(textEnd)
  17. }
  19. if (textEnd < 0) {
  20.   text = html
  21.   html = ''
  22. }
  24. if (options.chars && text) {
  25.   options.chars(text)
  26. }

接下来判断 textEnd 是否大于等于 0 的，满足则说明到从当前位置到 textEnd 位置都是文本，并且如果 < 是纯文本中的字符，就继续找到真正的文本结束的位置，然后前进到结束的位置。

再继续判断 textEnd 小于 0 的情况，则说明整个 template 解析完毕了，把剩余的 html 都赋值给了 text。

最后调用了 options.chars 回调函数，并传 text 参数，这个回调函数的作用稍后我会详细介绍。

因此，在循环解析整个 template 的过程中，会根据不同的情况，去执行不同的回调函数，下面我们来看看这些回调函数的作用。

处理开始标签

对应伪代码：

  1. start (tag, attrs, unary) {
  2.   let element = createASTElement(tag, attrs)
  3.   processElement(element)
  4.   treeManagement()
  5. }

当解析到开始标签的时候，最后会执行 start 回调函数，函数主要就做 3 件事情，创建 AST 元素，处理 AST 元素，AST 树管理。下面我们来分别来看这几个过程。

  • 创建 AST 元素
  1. // check namespace.
  2. // inherit parent ns if there is one
  3. const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)
  5. // handle IE svg bug
  6. /* istanbul ignore if */
  7. if (isIE && ns === 'svg') {
  8.   attrs = guardIESVGBug(attrs)
  9. }
  11. let element: ASTElement = createASTElement(tag, attrs, currentParent)
  12. if (ns) {
  13.   element.ns = ns
  14. }
  16. export function createASTElement (
  17.   tag: string,
  18.   attrs: Array<Attr>,
  19.   parent: ASTElement | void
  20. ): ASTElement {
  21.   return {
  22.     type: 1,
  23.     tag,
  24.     attrsList: attrs,
  25.     attrsMap: makeAttrsMap(attrs),
  26.     parent,
  27.     children: []
  28.   }
  29. }

通过 createASTElement 方法去创建一个 AST 元素，并添加了 namespace。可以看到，每一个 AST 元素就是一个普通的 JavaScript 对象，其中，type 表示 AST 元素类型，tag 表示标签名，attrsList 表示属性列表，attrsMap 表示属性映射表，parent 表示父的 AST 元素，children 表示子 AST 元素集合。

  • 处理 AST 元素
  1. if (isForbiddenTag(element) && !isServerRendering()) {
  2.   element.forbidden = true
  3.   process.env.NODE_ENV !== 'production' && warn(
  4.     'Templates should only be responsible for mapping the state to the ' +
  5.     'UI. Avoid placing tags with side-effects in your templates, such as ' +
  6.     `<${tag}>` + ', as they will not be parsed.'
  7.   )
  8. }
  10. // apply pre-transforms
  11. for (let i = 0; i < preTransforms.length; i++) {
  12.   element = preTransforms[i](element, options) || element
  13. }
  15. if (!inVPre) {
  16.   processPre(element)
  17.   if (element.pre) {
  18.     inVPre = true
  19.   }
  20. }
  21. if (platformIsPreTag(element.tag)) {
  22.   inPre = true
  23. }
  24. if (inVPre) {
  25.   processRawAttrs(element)
  26. } else if (!element.processed) {
  27.   // structural directives
  28.   processFor(element)
  29.   processIf(element)
  30.   processOnce(element)
  31.   // element-scope stuff
  32.   processElement(element, options)
  33. }

首先是对模块 preTransforms 的调用，其实所有模块的 preTransforms、 transforms 和 postTransforms 的定义都在 src/platforms/web/compiler/modules 目录中，这部分我们暂时不会介绍，之后会结合具体的例子说。接着判断 element 是否包含各种指令通过 processXXX 做相应的处理，处理的结果就是扩展 AST 元素的属性。这里我并不会一一介绍所有的指令处理，而是结合我们当前的例子，我们来看一下 processFor 和 processIf：

  1. export function processFor (el: ASTElement) {
  2.   let exp
  3.   if ((exp = getAndRemoveAttr(el, 'v-for'))) {
  4.     const res = parseFor(exp)
  5.     if (res) {
  6.       extend(el, res)
  7.     } else if (process.env.NODE_ENV !== 'production') {
  8.       warn(
  9.         `Invalid v-for expression: ${exp}`
  10.       )
  11.     }
  12.   }
  13. }
  15. export const forAliasRE = /(.*?)\s+(?:in|of)\s+(.*)/
  16. export const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
  17. const stripParensRE = /^\(|\)$/g
  18. export function parseFor (exp: string): ?ForParseResult {
  19.   const inMatch = exp.match(forAliasRE)
  20.   if (!inMatch) return
  21.   const res = {}
  22.   res.for = inMatch[2].trim()
  23.   const alias = inMatch[1].trim().replace(stripParensRE, '')
  24.   const iteratorMatch = alias.match(forIteratorRE)
  25.   if (iteratorMatch) {
  26.     res.alias = alias.replace(forIteratorRE, '')
  27.     res.iterator1 = iteratorMatch[1].trim()
  28.     if (iteratorMatch[2]) {
  29.       res.iterator2 = iteratorMatch[2].trim()
  30.     }
  31.   } else {
  32.     res.alias = alias
  33.   }
  34.   return res
  35. }

processFor 就是从元素中拿到 v-for 指令的内容，然后分别解析出 for、alias、iterator1、iterator2 等属性的值添加到 AST 的元素上。就我们的示例 v-for="(item,index) in data" 而言，解析出的的 for 是 data，alias 是 item，iterator1 是 index，没有 iterator2。

  1. function processIf (el) {
  2.   const exp = getAndRemoveAttr(el, 'v-if')
  3.   if (exp) {
  4.     el.if = exp
  5.     addIfCondition(el, {
  6.       exp: exp,
  7.       block: el
  8.     })
  9.   } else {
  10.     if (getAndRemoveAttr(el, 'v-else') != null) {
  11.       el.else = true
  12.     }
  13.     const elseif = getAndRemoveAttr(el, 'v-else-if')
  14.     if (elseif) {
  15.       el.elseif = elseif
  16.     }
  17.   }
  18. }
  19. export function addIfCondition (el: ASTElement, condition: ASTIfCondition) {
  20.   if (!el.ifConditions) {
  21.     el.ifConditions = []
  22.   }
  23.   el.ifConditions.push(condition)
  24. }

processIf 就是从元素中拿 v-if 指令的内容，如果拿到则给 AST 元素添加 if 属性和 ifConditions 属性；否则尝试拿 v-else 指令及 v-else-if 指令的内容，如果拿到则给 AST 元素分别添加 else 和 elseif 属性。

  • AST 树管理
    我们在处理开始标签的时候为每一个标签创建了一个 AST 元素，在不断解析模板创建 AST 元素的时候，我们也要为它们建立父子关系，就像 DOM 元素的父子关系那样。

AST 树管理相关代码如下：

  1. function checkRootConstraints (el) {
  2.   if (process.env.NODE_ENV !== 'production') {
  3.     if (el.tag === 'slot' || el.tag === 'template') {
  4.       warnOnce(
  5.         `Cannot use <${el.tag}> as component root element because it may ` +
  6.         'contain multiple nodes.'
  7.       )
  8.     }
  9.     if (el.attrsMap.hasOwnProperty('v-for')) {
  10.       warnOnce(
  11.         'Cannot use v-for on stateful component root element because ' +
  12.         'it renders multiple elements.'
  13.       )
  14.     }
  15.   }
  16. }
  19. // tree management
  20. if (!root) {
  21.   root = element
  22.   checkRootConstraints(root)
  23. } else if (!stack.length) {
  24.   // allow root elements with v-if, v-else-if and v-else
  25.   if (root.if && (element.elseif || element.else)) {
  26.     checkRootConstraints(element)
  27.     addIfCondition(root, {
  28.       exp: element.elseif,
  29.       block: element
  30.     })
  31.   } else if (process.env.NODE_ENV !== 'production') {
  32.     warnOnce(
  33.       `Component template should contain exactly one root element. ` +
  34.       `If you are using v-if on multiple elements, ` +
  35.       `use v-else-if to chain them instead.`
  36.     )
  37.   }
  38. }
  39. if (currentParent && !element.forbidden) {
  40.   if (element.elseif || element.else) {
  41.     processIfConditions(element, currentParent)
  42.   } else if (element.slotScope) { // scoped slot
  43.     currentParent.plain = false
  44.     const name = element.slotTarget || '"default"'
  45.     ;(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element
  46.   } else {
  47.     currentParent.children.push(element)
  48.     element.parent = currentParent
  49.   }
  50. }
  51. if (!unary) {
  52.   currentParent = element
  53.   stack.push(element)
  54. } else {
  55.   closeElement(element)
  56. }

AST 树管理的目标是构建一颗 AST 树，本质上它要维护 root 根节点和当前父节点 currentParent。为了保证元素可以正确闭合，这里也利用了 stack 栈的数据结构，和我们之前解析模板时用到的 stack 类似。

当我们在处理开始标签的时候，判断如果有 currentParent，会把当前 AST 元素 push 到 currentParent.chilldren 中，同时把 AST 元素的 parent 指向 currentParent。

接着就是更新 currentParent 和 stack ，判断当前如果不是一个一元标签，我们要把它生成的 AST 元素 push 到 stack 中，并且把当前的 AST 元素赋值给 currentParent。

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

处理闭合标签

对应伪代码：

  1. end () {
  2.   treeManagement()
  3.   closeElement()
  4. }

当解析到闭合标签的时候，最后会执行 end 回调函数：

  1. // remove trailing whitespace
  2. const element = stack[stack.length - 1]
  3. const lastNode = element.children[element.children.length - 1]
  4. if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {
  5.   element.children.pop()
  6. }
  7. // pop stack
  8. stack.length -= 1
  9. currentParent = stack[stack.length - 1]
  10. closeElement(element)

首先处理了尾部空格的情况，然后把 stack 的元素弹一个出栈，并把 stack 最后一个元素赋值给 currentParent，这样就保证了当遇到闭合标签的时候，可以正确地更新 stack 的长度以及 currentParent 的值，这样就维护了整个 AST 树。

最后执行了 closeElement(elment)：

  1. function closeElement (element) {
  2.   // check pre state
  3.   if (element.pre) {
  4.     inVPre = false
  5.   }
  6.   if (platformIsPreTag(element.tag)) {
  7.     inPre = false
  8.   }
  9.   // apply post-transforms
  10.   for (let i = 0; i < postTransforms.length; i++) {
  11.     postTransforms[i](element, options)
  12.   }
  13. }

closeElement 逻辑很简单，就是更新一下 inVPre 和 inPre 的状态，以及执行 postTransforms 函数，这些我们暂时都不必了解。

处理文本内容

对应伪代码：

  1. chars (text: string) {
  2.   handleText()
  3.   createChildrenASTOfText()
  4. }

除了处理开始标签和闭合标签，我们还会在解析模板的过程中去处理一些文本内容：

  1. const children = currentParent.children
  2. text = inPre || text.trim()
  3.   ? isTextTag(currentParent) ? text : decodeHTMLCached(text)
  4.   // only preserve whitespace if its not right after a starting tag
  5.   : preserveWhitespace && children.length ? ' ' : ''
  6. if (text) {
  7.   let res
  8.   if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
  9.     children.push({
  10.       type: 2,
  11.       expression: res.expression,
  12.       tokens: res.tokens,
  13.       text
  14.     })
  15.   } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
  16.     children.push({
  17.       type: 3,
  18.       text
  19.     })
  20.   }
  21. }

文本构造的 AST 元素有 2 种类型，一种是有表达式的，type 为 2，一种是纯文本，type 为 3。在我们的例子中，文本就是 :，是个表达式，通过执行 parseText(text, delimiters) 对文本解析，它的定义在 src/compiler/parser/text-parsre.js 中：

  1. const defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g
  2. const regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/g
  4. const buildRegex = cached(delimiters => {
  5.   const open = delimiters[0].replace(regexEscapeRE, '\\$&')
  6.   const close = delimiters[1].replace(regexEscapeRE, '\\$&')
  7.   return new RegExp(open + '((?:.|\\n)+?)' + close, 'g')
  8. })
  10. export function parseText (
  11.   text: string,
  12.   delimiters?: [string, string]
  13. ): TextParseResult | void {
  14.   const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE
  15.   if (!tagRE.test(text)) {
  16.     return
  17.   }
  18.   const tokens = []
  19.   const rawTokens = []
  20.   let lastIndex = tagRE.lastIndex = 0
  21.   let match, index, tokenValue
  22.   while ((match = tagRE.exec(text))) {
  23.     index = match.index
  24.     // push text token
  25.     if (index > lastIndex) {
  26.       rawTokens.push(tokenValue = text.slice(lastIndex, index))
  27.       tokens.push(JSON.stringify(tokenValue))
  28.     }
  29.     // tag token
  30.     const exp = parseFilters(match[1].trim())
  31.     tokens.push(`_s(${exp})`)
  32.     rawTokens.push({ '@binding': exp })
  33.     lastIndex = index + match[0].length
  34.   }
  35.   if (lastIndex < text.length) {
  36.     rawTokens.push(tokenValue = text.slice(lastIndex))
  37.     tokens.push(JSON.stringify(tokenValue))
  38.   }
  39.   return {
  40.     expression: tokens.join('+'),
  41.     tokens: rawTokens
  42.   }
  43. }

parseText 首先根据分隔符（默认是 {{}}）构造了文本匹配的正则表达式，然后再循环匹配文本，遇到普通文本就 push 到 rawTokens 和 tokens 中，如果是表达式就转换成 _s(${exp}) push 到 tokens 中，以及转换成 {@binding:exp} push 到 rawTokens 中。

对于我们的例子 :，tokens 就是 [_s(item),'":"',_s(index)]；rawTokens 就是 [{'@binding':'item'},':',{'@binding':'index'}]。那么返回的对象如下：

  1. return {
  2.  expression: '_s(item)+":"+_s(index)',
  3.  tokens: [{'@binding':'item'},':',{'@binding':'index'}]
  4. }

流程图

parse - 图4

总结

那么至此，parse 的过程就分析完了，看似复杂，但我们可以抛开细节理清它的整体流程。parse 的目标是把 template 模板字符串转换成 AST 树，它是一种用 JavaScript 对象的形式来描述整个模板。那么整个 parse 的过程是利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造 AST 树的目的。

AST 元素节点总共有 3 种类型，type 为 1 表示是普通元素，为 2 表示是表达式，为 3 表示是纯文本。其实这里我觉得源码写的不够友好，这种是典型的魔术数字，如果转换成用常量表达会更利于源码阅读。

当 AST 树构造完毕，下一步就是 optimize 优化这颗树。

原文: https://ustbhuangyi.github.io/vue-analysis/compile/parse.html