Vue 3源码极客之：`Vue`的`compiler`：如何将`template`中的`v-bind`编译成`props`。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是今晚的主讲人，咱们今晚的夜宵是Vue 3的compiler，特别是它如何把template里的v-bind变成props的魔法。

别担心，咱们不搞那些高深的理论，直接撸代码，用最接地气的方式，把这玩意儿扒个底朝天。

一、Compiler 概览：从Template到Render Function

首先，咱们得知道compiler是干啥的。简单来说，它就是一个翻译官，把咱们写的template翻译成render function。这个render function最终会生成虚拟DOM，然后Vue会把虚拟DOM渲染成真实的DOM。

这个过程大致可以分为三个阶段：

Parsing (解析)：把template字符串变成抽象语法树 (AST)。
Transformation (转换)：对AST进行各种转换和优化，比如处理v-bind、v-if、v-for等等。
Code Generation (代码生成)：把转换后的AST生成render function的代码字符串。

咱们今晚重点关注的是Transformation阶段，特别是v-bind的处理。

二、Parsing：Template 变成 AST

Parsing的过程比较复杂，涉及到词法分析和语法分析。咱们先简单看一下AST长啥样。

假设咱们有这样一个template：

<div id="app">
  <button v-bind:count="myCount" class="btn">Click me</button>
</div>

经过Parsing之后，会生成一个AST，这个AST大概是这样的（简化版）：

{
  type: 'Root',
  children: [
    {
      type: 'Element',
      tag: 'div',
      props: [
        {
          type: 'Attribute',
          name: 'id',
          value: {
            content: 'app'
          }
        }
      ],
      children: [
        {
          type: 'Element',
          tag: 'button',
          props: [
            {
              type: 'Directive',
              name: 'bind',
              arg: {
                type: 'SimpleExpression',
                content: 'count'
              },
              exp: {
                type: 'SimpleExpression',
                content: 'myCount'
              },
            },
            {
              type: 'Attribute',
              name: 'class',
              value: {
                content: 'btn'
              }
            }
          ],
          children: [
            {
              type: 'Text',
              content: 'Click me'
            }
          ]
        }
      ]
    }
  ]
}

可以看到，v-bind:count="myCount" 被解析成了一个 Directive 类型的节点。其中，name 是 "bind"，arg 是 "count"，exp 是 "myCount"。

三、Transformation：v-bind 的变形记

Transformation阶段是compiler的核心，它会对AST进行各种转换和优化。其中，处理v-bind的过程就是把 Directive 类型的节点转换成 props 对象。

Vue 3 使用一系列的transform函数来处理AST，每个transform函数负责处理一种类型的节点或指令。处理v-bind的transform函数通常叫做 transformElement。

transformElement 函数会遍历AST中的所有Element节点，然后检查每个Element节点是否包含 v-bind 指令。如果包含，它会把v-bind指令转换成 props 对象。

咱们来看一段简化的代码，模拟一下 transformElement 函数的处理过程：

function transformElement(node, context) {
  if (node.type === 'Element') {
    const props = node.props;
    const newProps = [];

    for (let i = 0; i < props.length; i++) {
      const prop = props[i];

      if (prop.type === 'Directive' && prop.name === 'bind') {
        // 找到 v-bind 指令
        const arg = prop.arg.content; // 属性名，比如 'count'
        const value = prop.exp.content; // 属性值，比如 'myCount'

        // 创建 props 对象
        const propObject = {
          type: 'ObjectProperty',
          key: {
            type: 'SimpleExpression',
            content: arg,
            isStatic: true // 表示属性名是静态的
          },
          value: {
            type: 'SimpleExpression',
            content: value,
            isStatic: false // 表示属性值是动态的
          }
        };

        newProps.push(propObject);
      } else {
        // 其他属性，直接保留
        newProps.push(prop);
      }
    }

    // 更新节点的 props 属性
    node.props = newProps;
  }
}

这段代码做了以下几件事：

遍历Element节点的props。
如果找到 v-bind 指令，就提取属性名和属性值。
创建一个 ObjectProperty 类型的节点，表示一个props对象。
把新的props对象添加到newProps数组中。
用newProps数组更新节点的props属性。

经过这个transform函数处理之后，AST中v-bind指令会被转换成ObjectProperty类型的节点。

例如，对于上面的例子，v-bind:count="myCount" 会被转换成：

{
  type: 'ObjectProperty',
  key: {
    type: 'SimpleExpression',
    content: 'count',
    isStatic: true
  },
  value: {
    type: 'SimpleExpression',
    content: 'myCount',
    isStatic: false
  }
}

四、Code Generation：AST 变成 Render Function

Code Generation阶段会遍历转换后的AST，生成render function的代码字符串。

对于上面的例子，经过Transformation之后，AST中button节点的props属性会变成一个包含 count: myCount 这样的对象。

Code Generation的过程会把这个对象转换成render function中的props选项。

咱们来看一段简化的代码，模拟一下 Code Generation 的过程：

function generateCode(ast) {
  // 递归遍历 AST
  function traverse(node) {
    switch (node.type) {
      case 'Root':
        return generateRoot(node);
      case 'Element':
        return generateElement(node);
      case 'Text':
        return generateText(node);
      case 'SimpleExpression':
        return generateSimpleExpression(node);
      case 'ObjectProperty':
        return generateObjectProperty(node);
      case 'Attribute':
        return generateAttribute(node);
      default:
        return '';
    }
  }

  function generateRoot(node) {
    let code = `
      return function render(_ctx, _cache, $props, $setup, $data, $options) {
        return ${traverse(node.children[0])}
      }
    `;
    return code;
  }

  function generateElement(node) {
    const tag = node.tag;
    const props = node.props;
    const children = node.children;

    let propsCode = '';
    if (props.length > 0) {
      propsCode = '{' + props.map(prop => traverse(prop)).join(', ') + '}';
    }

    let childrenCode = children.map(child => traverse(child)).join(', ');

    return `_createElementBlock("${tag}", ${propsCode}, [${childrenCode}])`;
  }

  function generateObjectProperty(node) {
    const key = traverse(node.key);
    const value = traverse(node.value);
    return `${key}: ${value}`;
  }

  function generateSimpleExpression(node) {
    return node.content;
  }

  function generateText(node) {
    return `_createTextVNode("${node.content}")`;
  }

    function generateAttribute(node) {
        return `"${node.name}": "${node.value.content}"`
    }

  // 开始遍历 AST
  return traverse(ast);
}

这段代码会生成一个render function，这个render function会使用 _createElementBlock 和 _createTextVNode 等辅助函数来创建虚拟DOM。

对于上面的例子，生成的render function的代码大概是这样的：

return function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _createElementBlock("div", {"id": "app"}, [
    _createElementBlock("button", {
      "class": "btn",
      "count": _ctx.myCount // 注意这里，v-bind:count="myCount" 变成了 props.count = _ctx.myCount
    }, [
      _createTextVNode("Click me")
    ])
  ])
}

可以看到，v-bind:count="myCount" 最终被转换成了 props.count = _ctx.myCount。

五、核心数据结构对比：Directive vs. ObjectProperty

为了更清晰地理解 v-bind 的转换过程，咱们来对比一下 Directive 和 ObjectProperty 这两种数据结构：

数据结构	类型	描述
`Directive`	Directive	表示一个指令，比如 `v-bind`、`v-if`、`v-for` 等。它包含指令的名称、参数和表达式。
`ObjectProperty`	ObjectProperty	表示一个对象的属性。它包含属性的键和值。在 `v-bind` 的转换过程中，`ObjectProperty` 用来表示一个组件的 `props` 对象。属性的键是 `v-bind` 的属性名，属性的值是 `v-bind` 的表达式。

六、实战案例：深入源码，追踪transformElement

光说不练假把式，咱们现在就深入Vue 3的源码，追踪一下 transformElement 函数的实现。

Vue 3 的 compiler 源码位于 packages/compiler-core 目录下。transformElement 函数的实现位于 packages/compiler-core/src/transforms/transformElement.ts 文件中。

打开这个文件，你会看到一个比较复杂的函数。咱们挑一些关键的代码片段来分析一下：

export function transformElement(
  node: RootNode | ParentNode,
  context: TransformContext
) {
  if (node.type === NodeTypes.ELEMENT) {
    const { tag, props } = node
    const isComponent = resolveComponentType(node, context) !== undefined

    for (let i = 0; i < props.length; i++) {
      const prop = props[i]
      if (prop.type === NodeTypes.DIRECTIVE) {
        if (prop.name === 'bind') {
          // 处理 v-bind 指令
          const { arg, exp, modifiers } = prop

          if (arg && arg.type === NodeTypes.SIMPLE_EXPRESSION) {
            const propName = arg.content
            const propValue = exp

            // 创建 props 对象
            const propObject = createObjectProperty(
              createSimpleExpression(propName, true), // key
              propValue || createSimpleExpression('', true) // value
            )

            // 把 props 对象添加到 node.props 数组中
            node.props[i] = propObject
          }
        }
      }
    }
  }
}

这段代码和咱们前面模拟的代码非常相似。它首先判断节点是否是Element节点，然后遍历节点的props属性，如果找到 v-bind 指令，就提取属性名和属性值，创建一个 ObjectProperty 类型的节点，最后把新的props对象添加到node.props数组中。

七、进阶：动态参数和修饰符

v-bind 还有一些高级用法，比如动态参数和修饰符。

动态参数：使用 v-bind:[attributeName]="value" 可以动态地绑定属性名。
修饰符：使用 v-bind:count.sync="myCount" 可以实现双向绑定。

transformElement 函数也需要处理这些高级用法。

对于动态参数，transformElement 会把属性名转换成一个动态的表达式。

对于修饰符，transformElement 会根据修饰符的类型，生成不同的代码。比如，对于 .sync 修饰符，transformElement 会生成一个更新父组件数据的代码。

八、总结：v-bind 的编译过程

咱们来总结一下 v-bind 的编译过程：

Parsing：把template字符串解析成AST。
Transformation：使用 transformElement 函数遍历AST，找到 v-bind 指令，提取属性名和属性值，创建一个 ObjectProperty 类型的节点，把新的props对象添加到node.props数组中。
Code Generation：遍历转换后的AST，生成render function的代码字符串，把 v-bind 指令转换成 props 对象的赋值语句。

用一张表格来概括：

阶段	任务	核心函数/数据结构
Parsing	将template字符串解析成AST	AST (Abstract Syntax Tree), NodeTypes
Transformation	遍历AST，处理`v-bind`指令，将`Directive`转换为`ObjectProperty`，添加到`props`数组中	`transformElement`, `Directive`, `ObjectProperty`, `createObjectProperty`, `createSimpleExpression`
Code Generation	遍历AST，生成render function代码，将`props`对象转换为虚拟DOM的属性	`generateCode`, `_createElementBlock`, `_createTextVNode`

九、彩蛋：Vue 3 Compiler 的设计思想

Vue 3 的 compiler 采用了一种模块化的设计思想，把compiler分解成多个小的transform函数，每个transform函数负责处理一种类型的节点或指令。这种设计方式使得compiler的代码更加清晰、易于维护和扩展。

同时，Vue 3 的 compiler 还使用了大量的优化技巧，比如静态分析、缓存和代码生成优化，以提高编译的效率和生成代码的质量。

十、作业

仔细阅读 packages/compiler-core/src/transforms/transformElement.ts 文件的源码，理解 transformElement 函数的实现细节。
尝试修改 transformElement 函数，添加对新的 v-bind 修饰符的支持。

今晚的夜宵就到这里了，希望大家吃得开心，消化良好！咱们下期再见！

发表回复 取消回复

发表回复取消回复