深入理解 Vue 3 源码中 `v-model` 语法糖在编译时如何转换为 `modelValue` prop 和 `update:modelValue` 事件。

各位观众，晚上好！我是今天的主讲人，咱们今天聊聊 Vue 3 源码中 v-model 这个小妖精，看看它在编译的时候是怎么变身的。

v-model：语法糖的甜蜜负担

v-model，Vue 里面最常用的指令之一，简直是双向绑定的代言人。但是，这玩意儿其实是个语法糖，吃起来甜，消化起来可不简单。

简单来说，v-model 背后藏着两个东西：

1. 一个 prop，通常是 modelValue（当然，你可以自定义）。
2. 一个 event，通常是 update:modelValue（同样可以自定义）。

也就是说，当我们写下：

<input v-model="myValue">

实际上，Vue 悄悄地帮我们做了这样的事情（简化版）：

<input :value="myValue" @input="$emit('update:myValue', $event.target.value)">

那么，问题来了，Vue 编译器是怎么把 v-model 变成 modelValue 和 update:modelValue 的？ 这就是我们今天要扒开源码看看的地方。

源码探险：从 Parse 到 Transform

Vue 的编译过程主要分为三个阶段：

1. Parse (解析): 将模板字符串转换成抽象语法树 (AST)。
2. Transform (转换): 遍历 AST，应用各种转换规则，例如处理指令、事件绑定等。
3. Generate (生成): 将转换后的 AST 生成渲染函数代码。

v-model 的转换主要发生在 Transform 阶段。在 compiler-core 模块里，有一个很重要的函数叫做 transformElement，它的职责就是处理 HTML 元素上的各种属性和指令，其中就包括 v-model。

我们先来简化一下 Vue 3 编译器核心代码，以便理解关键流程，如下：

// 一个简化的 transformElement 函数
function transformElement(node, context) {
  if (node.type === NodeTypes.ELEMENT) {
    processElement(node, context);
  }
}

function processElement(node, context) {
  let props = node.props;
  for (let i = 0; i < props.length; i++) {
    const prop = props[i];
    if (prop.type === NodeTypes.DIRECTIVE) {
      if (prop.name === 'model') {
        processVModel(node, prop, context);
      }
    }
  }
}

这个简化的 transformElement 函数，主要负责遍历元素的属性，一旦发现属性是指令（NodeTypes.DIRECTIVE），并且指令的名字是 model，就调用 processVModel 函数来处理 v-model。

processVModel：揭秘 v-model 的真面目

processVModel 函数才是 v-model 变身的核心。它会根据元素的类型（例如 <input>、<textarea>、<select>）以及 v-model 绑定的值，生成相应的 prop 和 event。

我们再来看一个更简化的 processVModel 函数：

function processVModel(node, dir, context) {
  const arg = dir.arg; // v-model:xxx  => arg = xxx
  const exp = dir.exp; // v-model="xxx" => exp = xxx
  const modifiers = dir.modifiers; // v-model.trim.number

  const propName = arg ? arg.content : 'modelValue'; // 没有参数默认 modelValue
  const eventName = `update:${propName}`;

  // 创建 prop
  const prop = {
    type: NodeTypes.ATTRIBUTE,
    name: propName,
    value: exp
  };

  // 创建 event handler
  const eventHandler = {
    type: NodeTypes.ELEMENT, // 通常是 CallExpression，这里简化为 ELEMENT 便于理解
    content: `$emit('${eventName}', $event.target.value)`
  };

  // 将 prop 和 event 添加到节点
  node.props.push(prop);
  node.events = node.events || [];
  node.events.push(eventHandler);
}

这个简化的 processVModel 函数做了以下事情：

1. 提取参数和表达式： 从 dir 对象中提取 v-model 的参数（arg）和表达式（exp）。例如，对于 <input v-model:title="myTitle">，arg 是 "title"，exp 是 "myTitle"。
2. 确定 prop 和 event 的名称： 如果 v-model 有参数，则使用参数作为 prop 的名称，并生成对应的 update:xxx 事件。如果没有参数，则默认使用 modelValue 作为 prop 的名称，update:modelValue 作为 event 的名称。
3. 创建 prop 对象： 创建一个 AST 节点，表示要添加到元素上的 prop。
4. 创建 event handler 对象： 创建一个 AST 节点，表示要添加到元素上的事件处理函数。这个函数通常会调用 $emit 方法来触发事件，并将新的值传递给父组件。
5. 将 prop 和 event 添加到节点： 将创建的 prop 和 event 添加到元素的 AST 节点上。

重点：

• dir.arg：这个属性存储的是 v-model: 后面的参数，例如 v-model:title 中的 title。
• dir.exp：这个属性存储的是 v-model="xxx" 中 xxx 表达式的值。
• dir.modifiers：这个属性存储的是修饰符，例如 v-model.trim 中的 trim。
• $emit：这是 Vue 组件实例上的一个方法，用于触发自定义事件。

不同类型元素的处理方式

实际上，processVModel 函数会根据元素的不同类型，采用不同的处理方式。例如，对于 <input type="checkbox">，它需要处理 checked 属性，而不是 value 属性。对于 <select>，它需要处理 value 属性，并且需要监听 change 事件，而不是 input 事件。

下面是一个简化的示例，展示了如何针对 <input type="checkbox"> 进行处理：

function processVModel(node, dir, context) {
  const arg = dir.arg;
  const exp = dir.exp;
  const modifiers = dir.modifiers;

  const propName = arg ? arg.content : 'modelValue';
  const eventName = `update:${propName}`;

  let prop;
  let eventHandler;

  if (node.tag === 'input' && node.props.some(p => p.name === 'type' && p.value === 'checkbox')) {
    // 处理 checkbox
    prop = {
      type: NodeTypes.ATTRIBUTE,
      name: 'checked', // 注意这里是 checked
      value: exp
    };

    eventHandler = {
      type: NodeTypes.ELEMENT,
      content: `$emit('${eventName}', $event.target.checked)` // 注意这里是 checked
    };
  } else {
    // 默认处理方式
    prop = {
      type: NodeTypes.ATTRIBUTE,
      name: propName,
      value: exp
    };

    eventHandler = {
      type: NodeTypes.ELEMENT,
      content: `$emit('${eventName}', $event.target.value)`
    };
  }

  node.props.push(prop);
  node.events = node.events || [];
  node.events.push(eventHandler);
}

这个示例代码的关键在于，当元素是 <input type="checkbox"> 时，它会将 prop 的 name 设置为 checked，并将 eventHandler 中的 $event.target.value 替换为 $event.target.checked。

modifiers 的妙用

v-model 还支持修饰符，例如 .trim、.number 等。这些修饰符可以在用户输入时对数据进行处理。

processVModel 函数会解析这些修饰符，并生成相应的代码。例如，对于 v-model.trim="myValue"，它会生成如下的代码：

$emit('update:modelValue', $event.target.value.trim())

下面是一个简化的示例，展示了如何处理 .trim 修饰符：

function processVModel(node, dir, context) {
  const arg = dir.arg;
  const exp = dir.exp;
  const modifiers = dir.modifiers;

  const propName = arg ? arg.content : 'modelValue';
  const eventName = `update:${propName}`;

  let prop = {
    type: NodeTypes.ATTRIBUTE,
    name: propName,
    value: exp
  };

  let eventHandlerContent = `$emit('${eventName}', $event.target.value)`;

  if (modifiers && modifiers.includes('trim')) {
    eventHandlerContent = `$emit('${eventName}', $event.target.value.trim())`;
  }

  const eventHandler = {
    type: NodeTypes.ELEMENT,
    content: eventHandlerContent
  };

  node.props.push(prop);
  node.events = node.events || [];
  node.events.push(eventHandler);
}

这个示例代码的关键在于，它会检查 modifiers 中是否包含 trim，如果包含，则在 eventHandlerContent 中添加 .trim() 方法。

生成渲染函数代码

经过 transformElement 和 processVModel 的处理，AST 已经包含了 v-model 转换后的 prop 和 event。接下来，Generate 阶段会将这些 AST 节点转换成渲染函数代码。

例如，对于以下模板：

<input v-model="myValue">

经过编译后，可能会生成如下的渲染函数代码（简化版）：

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("input", {
    "value": _ctx.myValue,
    "onInput": ($event) => (_ctx.myValue = $event.target.value)
  }, null, 32))
}

这个渲染函数代码的关键在于：

• value: input 元素的 value 属性绑定到了 _ctx.myValue（也就是组件的 myValue 数据）。
• onInput: input 元素的 input 事件绑定了一个事件处理函数，这个函数会将 $event.target.value（也就是用户输入的新值）赋值给 _ctx.myValue。

注意： 实际生成的代码会更加复杂，涉及到 _openBlock、_createElementBlock 等函数，这些都是 Vue 3 内部用于优化渲染性能的函数。这里为了简化理解，省略了这些细节。

自定义 v-model：灵活的选择

Vue 3 允许我们自定义 v-model 的 prop 和 event 名称。这可以通过 model 选项来实现。

例如，我们可以这样定义一个组件：

// MyComponent.vue
<template>
  <input :value="title" @input="$emit('updateTitle', $event.target.value)">
</template>

<script>
export default {
  props: {
    title: String
  },
  emits: ['updateTitle']
}
</script>

然后，在使用这个组件时，我们可以这样使用 v-model：

<MyComponent v-model:title="pageTitle"></MyComponent>

在这个例子中，v-model:title 实际上绑定的是 MyComponent 的 title prop 和 updateTitle event。

另一种自定义方式是在组件内部使用 model 选项：

// MyComponent.vue
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script>
export default {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  model: {
    prop: 'modelValue',
    event: 'update:modelValue'
  }
}
</script>

虽然上面的代码看起来有点多余，因为默认情况下 prop 就是 modelValue，event 就是 update:modelValue。但是，model 选项允许你更加灵活地配置 v-model 的行为。

v-model 的一些高级用法

除了基本的双向绑定，v-model 还有一些高级用法，例如：

• 多个 v-model： Vue 3 允许在一个组件上使用多个 v-model，通过指定不同的参数来实现。例如：

  <MyComponent v-model:title="pageTitle" v-model:content="pageContent"></MyComponent>

• 配合 computed 属性使用： 可以将 v-model 绑定到一个 computed 属性上，实现更复杂的双向绑定逻辑。

总结

v-model 是 Vue 中一个非常方便的语法糖，它简化了双向绑定的代码。但是，理解 v-model 背后的原理，可以帮助我们更好地使用它，并避免一些潜在的问题。

简单来说，v-model 的转换过程如下：

1. Parse： 将模板字符串转换成 AST。
2. Transform： 遍历 AST，找到 v-model 指令，并调用 processVModel 函数来处理它。processVModel 函数会根据元素的类型和 v-model 的参数，生成相应的 prop 和 event。
3. Generate： 将转换后的 AST 生成渲染函数代码。

希望今天的分享能帮助大家更深入地理解 v-model 的原理。下次再见！