Vue3 中的 v-bind 指令：你不知道的那些工作原理

前言

v-bind指令想必大家都不陌生，并且都知道他支持各种写法，比如<div v-bind:title="title">、<div :title="title">、<div :title>(vue3.4中引入的新的写法)。这三种写法的作用都是一样的，将title变量绑定到div标签的title属性上。本文将通过debug源码的方式带你搞清楚，v-bind指令是如何实现这么多种方式将title变量绑定到div标签的title属性上的。注：本文中使用的vue版本为3.4.19。

打包领取欧阳平时写文章都会参考的vue源码资料、解锁我更多vue原理文章

看个demo

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

<template>
  <div v-bind:title="title">Hello Word</div>
  <div :title="title">Hello Word</div>
  <div :title>Hello Word</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const title = ref("Hello Word");
</script>

上面的代码很简单，使用三种写法将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