(vue3.4中引入的新的写法)。这三种写法的作用都是一样的，将 title 变量绑定到div标签的title属性上。本文将通过debug源码的方式带你搞清楚，v-bind指令是如何实现这么多种方式将 title 变量绑定到div标签的title属性上的。注：本文中使用的vue版本为 3.4.19 。

关注公众号：【前端欧阳】，给自己一个进阶vue的机会

看个demo

还是老套路，我们来写个demo。代码如下：

上面的代码很简单，使用三种写法将title变量绑定到div标签的title属性上。

我们从浏览器中来看看编译后的代码，如下：

const _sfc_main = _defineComponent({
  __name: "index",
  setup(__props, { expose: __expose }) {
    // ...省略
  }
});

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _openBlock(), _createElementBlock(
    _Fragment,
    null,
    [
      _createElementVNode("div", { title: $setup.title }, "Hello Word", 8, _hoisted_1),
      _createElementVNode("div", { title: $setup.title }, "Hello Word", 8, _hoisted_2),
      _createElementVNode("div", { title: $setup.title }, "Hello Word", 8, _hoisted_3)
    ],
    64
    /* STABLE_FRAGMENT */
  );
}
_sfc_main.render = _sfc_render;
export default _sfc_main;

从上面的render函数中可以看到三种写法生成的props对象都是一样的： { title: $setup.title } 。props属性的key为 title ，值为 $setup.title 变量。

再来看看浏览器渲染后的样子，如下图：

从上图中可以看到三个div标签上面都有title属性，并且属性值都是一样的。

transformElement 函数

在之前的 面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？ 文章中我们讲过了在编译阶段会执行一堆transform转换函数，用于处理vue内置的v-for等指令。而v-bind指令就是在这一堆transform转换函数中的 transformElement 函数中处理的。

还是一样的套路启动一个debug终端。这里以 vscode 举例，打开终端然后点击终端中的 + 号旁边的下拉箭头，在下拉中点击 Javascript Debug Terminal 就可以启动一个 debug 终端。

给 transformElement 函数打个断点， transformElement 函数的代码位置在： node_modules/@vue/compiler-core/dist/compiler-core.cjs.js 。

在 debug 终端上面执行 yarn dev 后在浏览器中打开对应的页面，比如： http://localhost:5173/ 。此时断点就会走到 transformElement 函数中，在我们这个场景中简化后的 transformElement 函数代码如下：

const transformElement = (node, context) => {
  return function postTransformElement() {
    let vnodeProps;
    const propsBuildResult = buildProps(
      node,
      context,
      undefined,
      isComponent,
      isDynamicComponent
    );
    vnodeProps = propsBuildResult.props;

    node.codegenNode = createVNodeCall(
      context,
      vnodeTag,
      vnodeProps,
      vnodeChildren
      // ...省略
    );
  };
};

我们先来看看第一个参数 node ，如下图：

从上图中可以看到此时的node节点对应的就是

节点，其中的props数组中只有一项，对应的就是div标签中的 v-bind:title="title" 部分。

我们接着来看 transformElement 函数中的代码，可以分为两部分。

第一部分为调用 buildProps 函数拿到当前node节点的props属性赋值给 vnodeProps 变量。

第二部分为根据当前node节点 vnodeTag 也就是节点的标签比如div、 vnodeProps 也就是节点的props属性对象、 vnodeChildren 也就是节点的children子节点、还有一些其他信息生成 codegenNode 属性。在之前的 终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的 文章中我们已经讲过了编译阶段最终生成render函数就是读取每个node节点的 codegenNode 属性然后进行字符串拼接。

从 buildProps 函数的名字我们不难猜出他的作用就是生成node节点的props属性对象，所以我们接下来需要将目光聚焦到 buildProps 函数中，看看是如何生成props对象的。

buildProps 函数

将断点走进 buildProps 函数，在我们这个场景中简化后的代码如下：

function buildProps(node, context, props = node.props) {
  let propsExpression;
  let properties = [];

  for (let i = 0; i < props.length; i++) {
    const prop = props[i];
    const { name } = prop;
    const directiveTransform = context.directiveTransforms[name];
    if (directiveTransform) {
      const { props } = directiveTransform(prop, node, context);
      properties.push(...props);
    }
  }

  propsExpression = createObjectExpression(
    dedupeProperties(properties),
    elementLoc
  );
  return {
    props: propsExpression,
    // ...省略
  };
}

由于我们在调用 buildProps 函数时传的第三个参数为undefined，所以这里的props就是默认值 node.props 。如下图：

从上图中可以看到props数组中只有一项，props中的name字段为 bind ，说明v-bind指令还未被处理掉。

并且由于我们当前node节点是第一个div标签：