【Vue原理解析】之模版编译

// src/compiler/parser/index.ts
export function parse(template, options) {
  // ...
  const stack = []
  let root, currentParent
  // ...
  parseHTML(template, {
    // ...
    start(tag, attrs, unary, start, end) {
      // ...
      let element = createASTElement(tag, attrs, currentParent)
      if (!root) {
        root = element
      }
      if (!unary) {
        currentParent = element
        stack.push(element)
      } else {
        closeElement(element)
      }
    },
    // ...
    end(tag, start, end) {
      // ...
      stack.length -= 1
      currentParent = stack[stack.length - 1]
    },
    // ...
  })
  return root
}

*   `parse`函数是模版编译的入口函数，它接收一个模版字符串和一些选项作为参数。
*   `parse`函数内部创建了一个栈（stack）用于保存当前正在处理的元素节点，并定义了一些变量用于存储当前父节点、根节点等信息。
*   `parse`函数调用了`parseHTML`函数，将模版字符串作为参数传递给它，并传递了一个配置对象，其中包含了一些回调函数用于处理解析过程中的不同事件。
*   在解析过程中，当遇到开始标签时，会调用回调函数`start(tag, attrs, unary)`。在该回调函数中，会创建一个抽象语法树（AST）节点，并将其添加到当前父节点的子节点列表中。
*   当遇到结束标签时，会调用回调函数`end()`。在该回调函数中，会将当前父节点指向栈顶元素的父节点。
*   解析完成后，返回根节点。

*   `parseHTML`函数接收一个模版字符串和一个配置对象作为参数。
*   在解析过程中，使用正则表达式等方式对模版字符串进行扫描，并根据不同情况触发相应的回调函数。
*   当遇到开始标签时，会调用回调函数`start(tag, attrs, unary)`。在该回调函数中，会解析标签名、属性和自闭合标签等信息，并将其传递给`parse`函数。
*   当遇到结束标签时，会调用回调函数`end()`。
*   当遇到文本内容时，会调用回调函数`chars(text)`。在该回调函数中，会处理文本内容，并将其传递给`parse`函数。
*   解析完成后，返回解析结果。

export function generate(ast, options) {
  const state = new CodegenState(options)
  const code = ast
    ? ast.tag === 'script'
      ? 'null'
      : genElement(ast, state)
    : '_c("div")'
  return {
    render: `with(this){return ${code}}`,
    staticRenderFns: state.staticRenderFns
  }
}

*   `generate`函数接收一个抽象语法树（AST）和一些选项作为参数。
*   在函数内部，创建了一个名为`state`的代码生成器状态对象，用于保存生成渲染函数的状态和相关信息。生成渲染函数代码：

*   `generate`函数通过调用`genElement`函数，将抽象语法树转化为渲染函数的代码。
*   如果传入的抽象语法树为空，则默认生成一个简单的渲染函数代码 `_c("div")`。返回结果对象：

*   `generate`函数返回一个包含渲染函数和静态渲染函数数组的结果对象。
*   渲染函数通过字符串模板拼接方式生成，并使用 `with(this)` 包裹以确保在执行时可以访问到组件实例中的数据。
*   静态渲染函数数组用于优化静态节点，在组件初始化时只需要执行一次。

function genData(el, state) {
  // ...
  let data = '{'
  // ...
  if (el.directives) {
    data += genDirectives(el.directives, state)
  }
  // ...
  return data
}

function genDirectives(el, state) {
  const dirs = el.directives
  if (!dirs) return
  let res = 'directives:['
  let hasRuntime = false
  let i, l, dir, needRuntime
  for (i = 0, l = dirs.length; i < l; i++) {
    dir = dirs[i]
    needRuntime = true
    // ...
    if (needRuntime) {
      hasRuntime = true
      res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
        dir.value
          ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}`
          : ''
      }${dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''}${
        dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
      }},`
    }
  }
  if (hasRuntime) {
    return res.slice(0, -1) + ']'
  }
}

function genIf(el, state) {
  // ...
}

function genFor(el, state) {
  // ...
}

*   `genData`函数用于生成元素节点的数据对象。
*   在函数内部，首先创建一个空字符串变量 `data`，用于存储生成的数据对象代码。
*   然后根据元素节点的属性、指令等信息，将相应的代码拼接到 `data` 中。
*   如果元素节点包含指令（directives），则调用 `genDirectives` 函数生成指令相关的代码，并将其拼接到 `data` 中。
*   最后返回生成的数据对象代码。

*   `genDirectives`函数用于生成指令相关的代码。
*   在函数内部，遍历元素节点上的指令数组，并根据每个指令调用相应的处理函数（如 v-bind、v-on 等）来生成对应指令的代码。
*   通过遍历指令数组，将每个指令对应处理函数生成的代码拼接到一个字符串变量 `res` 中。
*   如果指令包含修饰符（modifiers）且包含 prevent 修饰符，则在最终生成的代码中添加阻止默认事件行为的逻辑。
*   最后返回生成的指令相关代码字符串。 总结起来，`genData`函数主要负责生成元素节点的数据对象代码，而`genDirectives`函数主要负责生成指令相关的代码。通过这两个函数的处理，Vue能够将模版中的元素节点转化为可执行的JavaScript代码，并实现数据绑定、指令操作等功能。这些生成的代码最终会被插入到渲染函数中，并在组件渲染时执行。