Vue 源码深入解析之编译、编译入口、parse、optimize 和 codegen

冷不防 2023-02-20 06:24 193阅读 0赞

#### 一、编译 ####

1.  模板到真实 `DOM` 渲染的过程，中间有一个环节是把模板编译成 `render` 函数，这个过程我们把它称作编译。虽然我们可以直接为组件编写 `render` 函数，但是编写 `template` 模板更加直观，也更符合我们的开发习惯。
2.  `Vue.js` 提供了两个版本，一个是 `Runtime + Compiler` 的，一个是 `Runtime only` 的，前者是包含编译代码的，可以把编译过程放在运行时做，后者是不包含编译代码的，需要借助 `webpack` 的 `vue-loader` 事先把模板编译成 `render`函数。
3.  这里我们就来分析编译的过程，对编译过程的了解会让我们对 `Vue` 的指令、内置组件等有更好的理解。不过由于编译的过程是一个相对复杂的过程，我们只要求理解整体的流程、输入和输出即可。

#### 二、编译入口 ####

1.  当我们使用 `Runtime + Compiler` 的 `Vue.js`，它的入口是 `src/platforms/web/entry-runtime-with-compiler.js`，看一下它对 `$mount` 函数的定义：

const mount = Vue.prototype.$mount
    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, { 
            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)
    }

1.  这段函数逻辑之前分析过，关于编译的入口就是在这里：

const {  render, staticRenderFns } =  compileToFunctions(template, { 
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
    options.render = render
    options.staticRenderFns = staticRenderFns

1.  `compileToFunctions` 方法就是把模板 `template` 编译生成 `render` 以及 `staticRenderFns`，它的定义在 `src/platforms/web/compiler/index.js` 中：

import {  baseOptions } from './options'
    import {  createCompiler } from 'compiler/index'
    
    const {  compile, compileToFunctions } = createCompiler(baseOptions)
    
    export {  compile, compileToFunctions }

1.  可以看到 `compileToFunctions` 方法实际上是 `createCompiler` 方法的返回值，该方法接收一个编译配置参数，接下来我们来看一下 `createCompiler` 方法的定义，在 `src/compiler/index.js` 中：

// `createCompilerCreator` allows creating compilers that use alternative
    // parser/optimizer/codegen, e.g the SSR optimizing compiler.
    // Here we just export a default compiler using the default parts.
    export const createCompiler = createCompilerCreator(function baseCompile (
      template: string,
      options: CompilerOptions
    ): CompiledResult { 
      const ast = parse(template.trim(), options)
      if (options.optimize !== false) { 
        optimize(ast, options)
      }
      const code = generate(ast, options)
      return { 
        ast,
        render: code.render,
        staticRenderFns: code.staticRenderFns
      }
    })

1.  `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 = []
          finalOptions.warn = (msg, tip) => { 
            (tip ? tips : errors).push(msg)
          }
    
          if (options) { 
            // 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]
              }
            }
          }
    
          const compiled = baseCompile(template, finalOptions)
          if (process.env.NODE_ENV !== 'production') { 
            errors.push.apply(errors, detectErrors(compiled.ast))
          }
          compiled.errors = errors
          compiled.tips = tips
          return compiled
        }
    
        return { 
          compile,
          compileToFunctions: createCompileToFunctionFn(compile)
        }
      }
    }

1.  可以看到该方法返回了一个 `createCompiler` 的函数，它接收一个 `baseOptions` 的参数，返回的是一个对象，包括 `compile` 方法属性和 `compileToFunctions` 属性，这个 `compileToFunctions` 对应的就是 `$mount` 函数调用的 `compileToFunctions` 方法，它是调用 `createCompileToFunctionFn` 方法的返回值，我们接下来看一下 `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
          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
        if (process.env.NODE_ENV !== 'production') { 
          if (compiled.errors && compiled.errors.length) { 
            warn(
              `Error compiling template:\n\n${ template}\n\n` +
              compiled.errors.map(e => `- ${ e}`).join('\n') + '\n',
              vm
            )
          }
          if (compiled.tips && compiled.tips.length) { 
            compiled.tips.forEach(msg => tip(msg, vm))
          }
        }
    
        // turn code into functions
        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)
      }
    }

1.  至此我们总算找到了 `compileToFunctions` 的最终定义，它接收三个参数、编译模板 `template`，编译配置 `options` 和 `Vue` 实例 `vm`。核心的编译过程就一行代码：

const compiled = compile(template, options)

1.  `compile` 函数在执行 `createCompileToFunctionFn` 的时候作为参数传入，它是 `createCompiler` 函数中定义的 `compile` 函数，如下所示：

function compile (
      template: string,
      options?: CompilerOptions
    ): CompiledResult { 
      const finalOptions = Object.create(baseOptions)
      const errors = []
      const tips = []
      finalOptions.warn = (msg, tip) => { 
        (tip ? tips : errors).push(msg)
      }
    
      if (options) { 
        // 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]
          }
        }
      }
    
      const compiled = baseCompile(template, finalOptions)
      if (process.env.NODE_ENV !== 'production') { 
        errors.push.apply(errors, detectErrors(compiled.ast))
      }
      compiled.errors = errors
      compiled.tips = tips
      return compiled
    }

1.  `compile` 函数执行的逻辑是先处理配置参数，真正执行编译过程就一行代码：

const compiled = baseCompile(template, finalOptions)

1.  `baseCompile` 在执行 `createCompilerCreator` 方法时作为参数传入，如下所示：

export const createCompiler = createCompilerCreator(function baseCompile (
      template: string,
      options: CompilerOptions
    ): CompiledResult { 
      const ast = parse(template.trim(), options)
      optimize(ast, options)
      const code = generate(ast, options)
      return { 
        ast,
        render: code.render,
        staticRenderFns: code.staticRenderFns
      }
    })

1.  编译的入口我们终于找到了，它主要就是执行了如下几个逻辑：

*  解析模板字符串生成 `AST`

const ast = parse(template.trim(), options)

*  优化语法树

optimize(ast, options)

*  生成代码

const code = generate(ast, options)

1.  总结：编译入口逻辑之所以这么绕，是因为 `Vue.js` 在不同的平台下都会有编译的过程，因此编译过程中的依赖的配置 `baseOptions` 会有所不同。而编译过程会多次执行，但这同一个平台下每一次的编译过程配置又是相同的，为了不让这些配置在每次编译过程都通过参数传入，`Vue.js` 利用了函数柯里化的技巧很好的实现了 `baseOptions` 的参数保留。同样，`Vue.js` 也是利用函数柯里化技巧把基础的编译过程函数抽出来，通过 `createCompilerCreator(baseCompile)` 的方式把真正编译的过程和其它逻辑如对编译配置处理、缓存处理等剥离开。

#### 三、parse 的理解 ####

1.  编译过程首先就是对模板做解析，生成 `AST`，它是一种抽象语法树，是对源代码的抽象语法结构的树状表现形式。在很多编译技术中，如 `babel` 编译 `ES6` 的代码都会先生成 `AST`。
2.  这个过程是比较复杂的，它会用到大量正则表达式对字符串解析，如果对正则不是很了解，建议先去补习正则表达式的知识。为了演示 `parse` 的过程，我们先来看一个例子：

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

> 可以看到，生成的 AST 是一个树状结构，每一个节点都是一个 `ast element`，除了它自身的一些属性，还维护了它的父子关系，如 `parent` 指向它的父节点，`children` 指向它的所有子节点。先对 AST 有一些直观的印象，那么接下来我们来分析一下这个 AST 是如何得到的。

1.  整体流程，首先来看一下 `parse` 的定义，在 `src/compiler/parser/index.js` 中：

export function parse (
      template: string,
      options: CompilerOptions
    ): ASTElement | void { 
      getFnsAndConfigFromOptions(options)
    
      parseHTML(template, { 
        // options ...
        start (tag, attrs, unary) { 
          let element = createASTElement(tag, attrs)
          processElement(element)
          treeManagement()
        },
    
        end () { 
          treeManagement()
          closeElement()
        },
    
        chars (text: string) { 
          handleText()
          createChildrenASTOfText()
        },
        comment (text: string) { 
          createChildrenASTOfComment()
        }
      })
      return astRootElement
    }

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

1.  从 `options` 中获取方法和配置，对应伪代码：

getFnsAndConfigFromOptions(options)

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

import { 
      isPreTag,
      mustUseProp,
      isReservedTag,
      getTagNamespace
    } from '../util/index'
    
    import modules from './modules/index'
    import directives from './directives/index'
    import {  genStaticKeys } from 'shared/util'
    import {  isUnaryTag, canBeLeftOpenTag } from './util'
    
    export const baseOptions: CompilerOptions = { 
      expectHTML: true,
      modules,
      directives,
      isPreTag,
      isUnaryTag,
      mustUseProp,
      canBeLeftOpenTag,
      isReservedTag,
      getTagNamespace,
      staticKeys: genStaticKeys(modules)
    }

1.  这些属性和方法之所以放到 `platforms` 目录下是因为它们在不同的平台（`web` 和 `weex`）的实现是不同的。我们用伪代码 `getFnsAndConfigFromOptions` 表示了这一过程，它的实际代码如下：

warn = options.warn || baseWarn
    
    platformIsPreTag = options.isPreTag || no
    platformMustUseProp = options.mustUseProp || no
    platformGetTagNamespace = options.getTagNamespace || no
    
    transforms = pluckModuleFunction(options.modules, 'transformNode')
    preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
    postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
    
    delimiters = options.delimiters

1.  解析 `HTML` 模板，对应伪代码：

parseHTML(template, options)

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

export function parseHTML (html, options) { 
      let lastTag
      while (html) { 
        if (!lastTag || !isPlainTextElement(lastTag)){ 
          let textEnd = html.indexOf('<')
          if (textEnd === 0) { 
             if(matchComment) { 
               advance(commentLength)
               continue
             }
             if(matchDoctype) { 
               advance(doctypeLength)
               continue
             }
             if(matchEndTag) { 
               advance(endTagLength)
               parseEndTag()
               continue
             }
             if(matchStartTag) { 
               parseStartTag()
               handleStartTag()
               continue
             }
          }
          handleText()
          advance(textLength)
        } else { 
           handlePlainTextElement()
           parseEndTag()
        }
      }
    }

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

function advance (n) { 
      index += n
      html = html.substring(n)
    }

1.  调用 `advance` 函数：

advance(4)

> 匹配的过程中主要利用了正则表达式，如下：

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

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

*  注释节点、文档类型节点，对于注释节点和文档类型节点的匹配，如果匹配到我们仅仅做的是做前进即可，如下所示：

if (comment.test(html)) { 
      const commentEnd = html.indexOf('-->')
    
      if (commentEnd >= 0) { 
        if (options.shouldKeepComment) { 
          options.comment(html.substring(4, commentEnd))
        }
        advance(commentEnd + 3)
        continue
      }
    }
    
    if (conditionalComment.test(html)) { 
      const conditionalEnd = html.indexOf(']>')
    
      if (conditionalEnd >= 0) { 
        advance(conditionalEnd + 2)
        continue
      }
    }
    
    const doctypeMatch = html.match(doctype)
    if (doctypeMatch) { 
      advance(doctypeMatch[0].length)
      continue
    }

*  对于注释和条件注释节点，前进至它们的末尾位置；对于文档类型节点，则前进它自身长度的距离。
 *  开始标签，如下所示：

const startTagMatch = parseStartTag()
    if (startTagMatch) { 
      handleStartTag(startTagMatch)
      if (shouldIgnoreFirstNewline(lastTag, html)) { 
        advance(1)
      }
      continue
    }

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

function parseStartTag () { 
      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(attribute))) { 
          advance(attr[0].length)
          match.attrs.push(attr)
        }
        if (end) { 
          match.unarySlash = end[1]
          advance(end[0].length)
          match.end = index
          return match
        }
      }
    }

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

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)
        }
      }
      
      const unary = isUnaryTag(tagName) || !!unarySlash
      
      const l = match.attrs.length
      const attrs = new Array(l)
      for (let i = 0; i < l; i++) { 
        const args = match.attrs[i]
        if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('""') === -1) { 
          if (args[3] === '') {  delete args[3] }
          if (args[4] === '') {  delete args[4] }
          if (args[5] === '') {  delete args[5] }
        }
        const value = args[3] || args[4] || args[5] || ''
        const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
          ? options.shouldDecodeNewlinesForHref
          : options.shouldDecodeNewlines
        attrs[i] = { 
          name: args[1],
          value: decodeAttr(value, shouldDecodeNewlines)
        }
      }
      
      if (!unary) { 
        stack.push({  tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs })
        lastTag = tagName
      }
      
      if (options.start) { 
        options.start(tagName, attrs, unary, match.start, match.end)
      }
    }

1.  `handleStartTag` 的核心逻辑很简单，先判断开始标签是否是一元标签，类似 `<img>、<br/>` 这样，接着对 `match.attrs` 遍历并做了一些处理，最后判断如果非一元标签，则往 `stack` 里 `push` 一个对象，并且把 `tagName` 赋值给 `lastTag`。最后调用了 `options.start` 回调函数，并传入一些参数。
2.  闭合标签，如下所示：

const endTagMatch = html.match(endTag)
    if (endTagMatch) { 
      const curIndex = index
      advance(endTagMatch[0].length)
      parseEndTag(endTagMatch[1], curIndex, index)
      continue
    }

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

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

1.  这个时候当 `endTag` 为 `</div>` 的时候，从 `stack` 尾部找到的标签是 `<span>`，就不能匹配，因此这种情况会报警告。匹配后把栈到 `pos` 位置的都弹出，并从 `stack` 尾部拿到 `lastTag`。最后调用了 `options.end` 回调函数，并传入一些参数。
2.  文本，如下所示：

let text, rest, next
    if (textEnd >= 0) { 
      rest = html.slice(textEnd)
      while (
        !endTag.test(rest) &&
        !startTagOpen.test(rest) &&
        !comment.test(rest) &&
        !conditionalComment.test(rest)
      ) { 
        next = rest.indexOf('<', 1)
        if (next < 0) break
        textEnd += next
        rest = html.slice(textEnd)
      }
      text = html.substring(0, textEnd)
      advance(textEnd)
    }
    
    if (textEnd < 0) { 
      text = html
      html = ''
    }
    
    if (options.chars && text) { 
      options.chars(text)
    }

*  接下来判断 `textEnd` 是否大于等于 0 的，满足则说明到从当前位置到 `textEnd` 位置都是文本，并且如果 `<` 是纯文本中的字符，就继续找到真正的文本结束的位置，然后前进到结束的位置。
 *  再继续判断 `textEnd` 小于 0 的情况，则说明整个 `template` 解析完毕了，把剩余的 `html` 都赋值给了 `text`。
 *  最后调用了 `options.chars` 回调函数，并传 `text` 参数，这个回调函数的作用稍后我会详细介绍。
 *  因此，在循环解析整个 `template` 的过程中，会根据不同的情况，去执行不同的回调函数，下面我们来看看这些回调函数的作用。

1.  处理开始标签，对应伪代码：

start (tag, attrs, unary) { 
      let element = createASTElement(tag, attrs)
      processElement(element)
      treeManagement()
    }

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

*  创建 `AST` 元素

// 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)
    }
    
    let element: ASTElement = createASTElement(tag, attrs, currentParent)
    if (ns) { 
      element.ns = ns
    }
    
    export function createASTElement (
      tag: string,
      attrs: Array<Attr>,
      parent: ASTElement | void
    ): ASTElement { 
      return { 
        type: 1,
        tag,
        attrsList: attrs,
        attrsMap: makeAttrsMap(attrs),
        parent,
        children: []
      }
    }

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

*  处理 `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.'
      )
    }
    
    // apply pre-transforms
    for (let i = 0; i < preTransforms.length; i++) { 
      element = preTransforms[i](element, options) || element
    }
    
    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)
      // element-scope stuff
      processElement(element, options)
    }

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

export function processFor (el: ASTElement) { 
      let exp
      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}`
          )
        }
      }
    }
    
    export const forAliasRE = /(.*?)\s+(?:in|of)\s+(.*)/
    export const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
    const stripParensRE = /^$|$$/g
    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, '')
        res.iterator1 = iteratorMatch[1].trim()
        if (iteratorMatch[2]) { 
          res.iterator2 = iteratorMatch[2].trim()
        }
      } else { 
        res.alias = alias
      }
      return res
    }

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

function processIf (el) { 
      const exp = getAndRemoveAttr(el, 'v-if')
      if (exp) { 
        el.if = exp
        addIfCondition(el, { 
          exp: exp,
          block: el
        })
      } else { 
        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)
    }

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

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

function checkRootConstraints (el) { 
      if (process.env.NODE_ENV !== 'production') { 
        if (el.tag === 'slot' || el.tag === 'template') { 
          warnOnce(
            `Cannot use <${ el.tag}> as component root element because it may ` +
            'contain multiple nodes.'
          )
        }
        if (el.attrsMap.hasOwnProperty('v-for')) { 
          warnOnce(
            'Cannot use v-for on stateful component root element because ' +
            'it renders multiple elements.'
          )
        }
      }
    }
    
    
    // tree management
    if (!root) { 
      root = element
      checkRootConstraints(root)
    } else if (!stack.length) { 
      // allow root elements with v-if, v-else-if and v-else
      if (root.if && (element.elseif || element.else)) { 
        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.`
        )
      }
    }
    if (currentParent && !element.forbidden) { 
      if (element.elseif || element.else) { 
        processIfConditions(element, currentParent)
      } else if (element.slotScope) {  // scoped slot
        currentParent.plain = false
        const name = element.slotTarget || '"default"'
        ;(currentParent.scopedSlots || (currentParent.scopedSlots = { }))[name] = element
      } else { 
        currentParent.children.push(element)
        element.parent = currentParent
      }
    }
    if (!unary) { 
      currentParent = element
      stack.push(element)
    } else { 
      closeElement(element)
    }

1.  `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 () { 
      treeManagement()
      closeElement()
    }

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

// remove trailing whitespace
    const element = stack[stack.length - 1]
    const lastNode = element.children[element.children.length - 1]
    if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) { 
      element.children.pop()
    }
    // pop stack
    stack.length -= 1
    currentParent = stack[stack.length - 1]
    closeElement(element)

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

function closeElement (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)
      }
    }

> `closeElement` 逻辑很简单，就是更新一下 `inVPre` 和 `inPre` 的状态，以及执行 `postTransforms` 函数。

1.  处理文本内容，对应伪代码：

chars (text: string) { 
      handleText()
      createChildrenASTOfText()
    }

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

const children = currentParent.children
    text = inPre || text.trim()
      ? isTextTag(currentParent) ? text : decodeHTMLCached(text)
      // only preserve whitespace if its not right after a starting tag
      : preserveWhitespace && children.length ? ' ' : ''
    if (text) { 
      let res
      if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) { 
        children.push({ 
          type: 2,
          expression: res.expression,
          tokens: res.tokens,
          text
        })
      } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') { 
        children.push({ 
          type: 3,
          text
        })
      }
    }

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

const defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g
    const regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/g
    
    const buildRegex = cached(delimiters => { 
      const open = delimiters[0].replace(regexEscapeRE, '\\$&')
      const close = delimiters[1].replace(regexEscapeRE, '\\$&')
      return new RegExp(open + '((?:.|\\n)+?)' + close, '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
        if (index > lastIndex) { 
          rawTokens.push(tokenValue = text.slice(lastIndex, index))
          tokens.push(JSON.stringify(tokenValue))
        }
        // tag token
        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
      }
    }

1.  `parseText` 首先根据分隔符（默认是 `{ {}}`）构造了文本匹配的正则表达式，然后再循环匹配文本，遇到普通文本就 `push` 到 `rawTokens` 和 `tokens` 中，如果是表达式就转换成 `_s(${exp})` `push` 到 `tokens` 中，以及转换成 `{@binding:exp}` `push` 到 `rawTokens` 中。对于我们的例子 `{ {item}}:{ {index}}`，`tokens` 就是 `[_s(item),'":"',_s(index)]`；`rawTokens` 就是 `[{'@binding':'item'},':',{'@binding':'index'}]`。那么返回的对象如下：

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

1.  总结：`parse` 的过程就分析完了，看似复杂，但我们可以抛开细节理清它的整体流程。`parse` 的目标是把 `template` 模板字符串转换成 `AST` 树，它是一种用 `JavaScript` 对象的形式来描述整个模板。那么整个 `parse` 的过程是利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造 `AST` 树的目的。`AST` 元素节点总共有三种类型，`type` 为 `1` 表示是普通元素，为 `2` 表示是表达式，为 `3` 表示是纯文本。当 `AST` 树构造完毕，下一步就是 `optimize` 优化这颗树。

#### 三、optimize 的理解 ####

1.  当我们的模板 `template` 经过 `parse` 过程后，会输出生成 `AST` 树，那么接下来我们需要对这颗树做优化，`optimize` 的逻辑是远简单于 `parse` 的逻辑，所以理解起来会轻松很多。
2.  我们知道 `Vue` 是数据驱动，是响应式的，但是我们的模板并不是所有数据都是响应式的，也有很多数据是首次渲染后就永远不会变化的，那么这部分数据生成的 `DOM` 也不会变化，我们可以在 `patch` 的过程跳过对他们的比对。来看一下 `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
      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)
    }
    
    function genStaticKeys (keys: string): Function { 
      return makeMap(
        'type,tag,attrsList,attrsMap,plain,parent,children,attrs' +
        (keys ? ',' + keys : '')
      )
    }

> 我们在编译阶段可以把一些 `AST` 节点优化成静态节点，所以整个 `optimize` 的过程实际上就干 2 件事情，`markStatic(root)` 标记静态节点 ，`markStaticRoots(root, false)` 标记静态根。

1.  标记静态节点，如下所示：

1.  首先执行 `node.static = isStatic(node)`。 `isStatic` 是对一个 `AST` 元素节点是否是静态的判断，如果是表达式，就是非静态；如果是纯文本，就是静态；对于一个普通元素，如果有 `pre` 属性，那么它使用了 `v-pre` 指令，是静态，否则要同时满足以下条件：没有使用 `v-if`、`v-for`，没有使用其它指令（不包括 `v-once`），非内置组件，是平台保留的标签，非带有 `v-for` 的 `template` 标签的直接子节点，节点的所有属性的 `key` 都满足静态 `key`；这些都满足则这个 `AST` 节点是一个静态节点。
2.  如果这个节点是一个普通元素，则遍历它的所有 `children`，递归执行 `markStatic`。因为所有的 `elseif` 和 `else` 节点都不在 `children` 中， 如果节点的 `ifConditions` 不为空，则遍历 `ifConditions` 拿到所有条件中的 `block`，也就是它们对应的 `AST` 节点，递归执行 `markStatic`。在这些递归过程中，一旦子节点有不是 `static` 的情况，则它的父节点的 `static` 均变成 `false`。
3.  标记静态根，如下所示：

1.  `markStaticRoots` 第二个参数是 `isInFor`，对于已经是 `static` 的节点或者是 `v-once` 指令的节点，`node.staticInFor = isInFor`。接着就是对于 `staticRoot` 的判断逻辑，从注释中我们可以看到，对于有资格成为 `staticRoot` 的节点，除了本身是一个静态节点外，必须满足拥有 `children`，并且 `children` 不能只是一个文本节点，不然的话把它标记成静态根节点的收益就很小了。接下来和标记静态节点的逻辑一样，遍历 `children` 以及 `ifConditions`，递归执行 `markStaticRoots`。
2.  经过 `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
        ]
      }]
    }

> 我们发现每一个 AST 元素节点都多了 `staic` 属性，并且 `type` 为 1 的普通元素 AST 节点多了 `staticRoot` 属性。

1.  总结：分析完了 `optimize` 的过程，就是深度遍历这个 `AST` 树，去检测它的每一颗子树是不是静态节点，如果是静态节点则它们生成 `DOM` 永远不需要改变，这对运行时对模板的更新起到极大的优化作用。我们通过 `optimize` 我们把整个 `AST` 树中的每一个 `AST` 元素节点标记了 `static` 和 `staticRoot`，它会影响我们接下来执行代码生成的过程。

#### 五、codegen 的理解 ####

1.  编译的最后一步就是把优化后的 `AST` 树转换成可执行的代码，了解整体流程即可。为了方便理解，我们还是用之前的例子：

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

> 它经过编译，执行 `const code = generate(ast, options)`，生成的 `render` 代码串如下：

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` 函数定义在 `src/core/instance/render.js` 中。

vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)

> 而 `_l`、`_v` 定义在 `src/core/instance/render-helpers/index.js` 中：

export function installRenderHelpers (target: any) { 
      target._o = markOnce
      target._n = toNumber
      target._s = toString
      target._l = renderList
      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
    }

1.  `_c` 就是执行 `createElement` 去创建 `VNode`，而 `_l` 对应 `renderList` 渲染列表；`_v` 对应 `createTextVNode` 创建文本 `VNode`；`_e` 对于 `createEmptyVNode`创建空的 `VNode`。 在 `compileToFunctions` 中，会把这个 `render` 代码串转换成函数，它的定义在 `src/compler/to-function.js` 中：

const compiled = compile(template, options)
    res.render = createFunction(compiled.render, fnGenErrors)
    
    function createFunction (code, errors) { 
      try { 
        return new Function(code)
      } catch (err) { 
        errors.push({  err, code })
        return noop
      }
    }

> 实际上就是把 `render` 代码串通过 `new Function` 的方式转换成可执行的函数，赋值给 `vm.options.render`，这样当组件通过 `vm._render` 的时候，就会执行这个 `render` 函数。那么接下来我们就重点关注一下这个 `render` 代码串的生成过程。

1.  `generate`，如下所示：

const code = generate(ast, options)

> `generate` 函数的定义在 `src/compiler/codegen/index.js` 中：

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

1.  `generate` 函数首先通过 `genElement(ast, state)` 生成 `code`，再把 `code` 用 `with(this){return ${code}}}` 包裹起来。这里的 `state` 是 `CodegenState` 的一个实例，先来看一下 `genElement`：

export function genElement (el: ASTElement, state: CodegenState): string { 
      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) { 
        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 { 
          const data = el.plain ? undefined : 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
      }
    }

> 基本就是判断当前 AST 元素节点的属性执行不同的代码生成函数，在我们的例子中，我们先了解一下 `genFor` 和 `genIf`。

1.  `genIf`，如下所示：

export function genIf (
      el: any,
      state: CodegenState,
      altGen?: Function,
      altEmpty?: string
    ): string { 
      el.ifProcessed = true // avoid recursion
      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()'
      }
    
      const condition = conditions.shift()
      if (condition.exp) { 
        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)
      }
    }

1.  `genIf` 主要是通过执行 `genIfConditions`，它是依次从 `conditions` 获取第一个 `condition`，然后通过对 `condition.exp` 去生成一段三元运算符的代码，`:` 后是递归调用 `genIfConditions`，这样如果有多个 `conditions`，就生成多层三元运算逻辑。这里我们暂时不考虑 `v-once` 的情况，所以  
    `genTernaryExp` 最终是调用了 `genElement`。在我们的例子中，只有一个 `condition`，`exp` 为 `isShow`，因此生成如下伪代码：

return (isShow) ? genElement(el, state) : _e()

1.  `genFor`，如下所示：

export function genFor (
      el: any,
      state: CodegenState,
      altGen?: Function,
      altHelper?: string
    ): string { 
      const exp = el.for
      const alias = el.alias
      const iterator1 = el.iterator1 ? `,${ el.iterator1}` : ''
      const iterator2 = el.iterator2 ? `,${ el.iterator2}` : ''
    
      if (process.env.NODE_ENV !== 'production' &&
        state.maybeComponent(el) &&
        el.tag !== 'slot' &&
        el.tag !== 'template' &&
        !el.key
      ) { 
        state.warn(
          `<${ el.tag} v-for="${ alias} in ${ exp}">: component lists rendered with ` +
          `v-for should have explicit keys. ` +
          `See https://vuejs.org/guide/list.html#key for more info.`,
          true /* tip */
        )
      }
    
      el.forProcessed = true // avoid recursion
      return `${ altHelper || '_l'}((${ exp}),` +
        `function(${ alias}${ iterator1}${ iterator2}){` +
          `return ${ (altGen || genElement)(el, state)}` +
        '})'
    }

1.  `genFor` 的逻辑很简单，首先 `AST` 元素节点中获取了和 `for` 相关的一些属性，然后返回了一个代码字符串。在我们的例子中，`exp` 是 `data`，`alias` 是 `item`，`iterator1` ，因此生成如下伪代码：

_l((data), function(item, index) { 
      return genElememt(el, state)
    })

1.  `genData & genChildren`，它的最外层是 `ul`，首先执行 `genIf`，它最终调用了 `genElement(el, state)` 去生成子节点，注意，这里的 `el` 仍然指向的是 `ul` 对应的 `AST` 节点，但是此时的 `el.ifProcessed` 为 `true`，所以命中最后一个 `else` 逻辑：

// component or element
    let code
    if (el.component) { 
      code = genComponent(el.component, el, state)
    } else { 
      const data = el.plain ? undefined : 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

> 这里我们只关注 2 个逻辑，`genData` 和 `genChildren`：

1.  `genData`，如下所示：

export function genData (el: ASTElement, state: CodegenState): string { 
      let data = '{'
    
      // directives first.
      // directives may mutate the el's other properties before they are generated.
      const dirs = genDirectives(el, state)
      if (dirs) data += dirs + ','
    
      // key
      if (el.key) { 
        data += `key:${ el.key},`
      }
      // ref
      if (el.ref) { 
        data += `ref:${ el.ref},`
      }
      if (el.refInFor) { 
        data += `refInFor:true,`
      }
      // pre
      if (el.pre) { 
        data += `pre:true,`
      }
      // record original tag name for components using "is" attribute
      if (el.component) { 
        data += `tag:"${ el.tag}",`
      }
      // module data generation functions
      for (let i = 0; i < state.dataGenFns.length; i++) { 
        data += state.dataGenFns[i](el)
      }
      // attributes
      if (el.attrs) { 
        data += `attrs:{ ${ genProps(el.attrs)}},`
      }
      // DOM props
      if (el.props) { 
        data += `domProps:{ ${ genProps(el.props)}},`
      }
      // event handlers
      if (el.events) { 
        data += `${ genHandlers(el.events, false, state.warn)},`
      }
      if (el.nativeEvents) { 
        data += `${ genHandlers(el.nativeEvents, true, state.warn)},`
      }
      // slot target
      // only for non-scoped slots
      if (el.slotTarget && !el.slotScope) { 
        data += `slot:${ el.slotTarget},`
      }
      // scoped slots
      if (el.scopedSlots) { 
        data += `${ genScopedSlots(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 data wrap
      if (el.wrapData) { 
        data = el.wrapData(data)
      }
      // v-on data wrap
      if (el.wrapListeners) { 
        data = el.wrapListeners(data)
      }
      return data
    }

1.  `genData` 函数就是根据 `AST` 元素节点的属性构造出一个 `data` 对象字符串，这个在后面创建 `VNode` 的时候的时候会作为参数传入。之前我们提到了 `CodegenState` 的实例 `state`，这里有一段关于 `state` 的逻辑：

for (let i = 0; i < state.dataGenFns.length; i++) { 
      data += state.dataGenFns[i](el)
    }

1.  `state.dataGenFns` 的初始化在它的构造器中，如下所示：

export class CodegenState { 
      constructor (options: CompilerOptions) { 
        // ...
        this.dataGenFns = pluckModuleFunction(options.modules, 'genData')
        // ...
      }
    }

1.  实际上就是获取所有 `modules` 中的 `genData` 函数，其中，`class module` 和 `style module` 定义了 `genData` 函数。比如定义在 `src/platforms/web/compiler/modules/class.js` 中的 `genData` 方法：

function genData (el: ASTElement): string { 
      let data = ''
      if (el.staticClass) { 
        data += `staticClass:${ el.staticClass},`
      }
      if (el.classBinding) { 
        data += `class:${ el.classBinding},`
      }
      return data
    }

1.  在我们的例子中，`ul` `AST` 元素节点定义了 `el.staticClass` 和 `el.classBinding`，因此最终生成的 `data` 字符串如下：

{ 
      staticClass: "list",
      class: bindCls
    }

1.  `genChildren`，接下来我们再来看一下 `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]
        if (children.length === 1 &&
          el.for &&
          el.tag !== 'template' &&
          el.tag !== 'slot'
        ) { 
          return (altGenElement || genElement)(el, state)
        }
        const normalizationType = checkSkip
          ? getNormalizationType(children, state.maybeComponent)
          : 0
        const gen = altGenNode || genNode
        return `[${ children.map(c => gen(c, state)).join(',')}]${ normalizationType ? `,${ normalizationType}` : ''
        }`
      }
    }

1.  在我们的例子中，`li` `AST` 元素节点是 `ul` `AST` 元素节点的 `children` 之一，满足 `(children.length === 1 && el.for && el.tag !== 'template' && el.tag !== 'slot')` 条件，因此通过 `genElement(el, state)` 生成 `li` `AST`元素节点的代码，也就回到了我们之前调用 `genFor` 生成的代码，把它们拼在一起生成的伪代码如下：

return (isShow) ?
        _c('ul', { 
            staticClass: "list",
            class: bindCls
          },
          _l((data), function(item, index) { 
            return genElememt(el, state)
          })
        ) : _e()

1.  在我们的例子中，在执行 `genElememt(el, state)` 的时候，`el` 还是 `li` `AST` 元素节点，`el.forProcessed` 已为 `true`，所以会继续执行 `genData` 和 `genChildren` 的逻辑。由于 `el.events` 不为空，在执行 `genData` 的时候，会执行 如下逻辑：

if (el.events) { 
      data += `${ genHandlers(el.events, false, state.warn)},`
    }

1.  `genHandlers` 的定义在 `src/compiler/codegen/events.js` 中：

export function genHandlers (
      events: ASTElementHandlers,
      isNative: boolean,
      warn: Function
    ): string { 
      let res = isNative ? 'nativeOn:{' : 'on:{'
      for (const name in events) { 
        res += `"${ name}":${ genHandler(name, events[name])},`
      }
      return res.slice(0, -1) + '}'
    }

> `genHandler` 的逻辑就不介绍了，很大部分都是对修饰符 `modifier` 的处理，对于我们的例子，它最终 `genData` 生成的 `data` 字符串如下：

{ 
      on: { 
        "click": function($event) { 
          clickItem(index)
        }
      }
    }

> `genChildren` 的时候，会执行到如下逻辑：

export function genChildren (
      el: ASTElement,
      state: CodegenState,
      checkSkip?: boolean,
      altGenElement?: Function,
      altGenNode?: Function
    ): string | void { 
      // ...
      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)
      } if (node.type === 3 && node.isComment) { 
        return genComment(node)
      } else { 
        return genText(node)
      }
    }

1.  `genChildren` 的就是遍历 `children`，然后执行 `genNode` 方法，根据不同的 `type` 执行具体的方法。在我们的例子中，`li` `AST` 元素节点的 `children` 是 `type` 为 `2` 的表达式 `AST` 元素节点，那么会执行到 `genText(node)` 逻辑，如下所示：

export function genText (text: ASTText | ASTExpression): string { 
      return `_v(${ text.type === 2 ? text.expression : transformSpecialNewlines(JSON.stringify(text.text)) })`
    }

> 因此在我们的例子中，`genChildren` 生成的代码串如下：

[_v(_s(item) + ":" + _s(index))]

> 和之前拼在一起，最终生成的 `code` 如下：

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

1.  总结：从 `ast -> code` 这一步有了一些了解，编译后生成的代码就是在运行时执行的代码。