Vue 3源码极客之：`Vue`的`compiler`如何处理`v-model`在不同元素类型上的代码生成。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今晚咱们聊点硬核的——Vue 3 编译器如何“拿捏” v-model，尤其是在面对五花八门的元素类型时，它又是如何见招拆招，生成对应的代码的。

今天的内容干货满满，请务必系好安全带，准备起飞！

一、v-model：Vue 的双向绑定神器，但背后水很深

v-model，一个看似简单的指令，却承载了 Vue 双向数据绑定的重任。简单来说，它能让表单元素的值和 Vue 实例的数据属性“眉来眼去”，一方改变，另一方立即更新。

但是！魔鬼藏在细节里。v-model 的行为会因为元素类型而异。比如，在 <input type="text"> 上，它监听 input 事件并更新 value 属性；而在 <input type="checkbox"> 上，它监听 change 事件并更新 checked 属性。

那么，Vue 编译器是如何巧妙地处理这些差异的呢？接下来，我们一起深入源码，揭开它的神秘面纱。

二、Compiler 的“庖丁解牛”：AST 的构建与转换

Vue 编译器的核心任务是将模板（template）转换成渲染函数（render function）。这个过程大致分为三个阶段：

解析 (Parsing)：将模板字符串解析成抽象语法树 (Abstract Syntax Tree, AST)。 AST 是一个树形结构，它描述了模板的语法结构。
转换 (Transformation)：遍历 AST，对节点进行转换和优化。比如，处理指令、添加静态节点标记等。
代码生成 (Code Generation)：将转换后的 AST 转换成 JavaScript 渲染函数。

v-model 的处理主要发生在转换阶段和代码生成阶段。

三、v-model 的 “变脸术”：不同元素类型的处理策略

在转换阶段，编译器会识别 v-model 指令，并根据元素类型采取不同的处理策略。

我们先来看一个简单的例子：

<template>
  <input type="text" v-model="message">
</template>

编译器会把这段模板解析成 AST，其中 input 元素对应的 AST 节点会包含 v-model 指令的信息。接着，编译器会根据 type 属性的值（text）来决定如何处理这个 v-model 指令。

接下来，我们用表格的形式整理不同元素类型的 v-model 处理方式：

元素类型	监听事件	更新属性	特殊处理
`<input type="text">`	`input`	`value`	处理 `compositionstart` 和 `compositionend` 事件，以支持中文输入法。
`<input type="radio">`	`change`	`checked`	需要处理 `value` 属性，确保绑定的是正确的单选框值。
`<input type="checkbox">`	`change`	`checked`	分为单选和多选两种情况。单选时，行为类似 radio。多选时，需要将绑定的值视为数组，根据 `checked` 状态添加或删除数组元素。
`<select>`	`change`	`value`	需要处理 `multiple` 属性，以支持多选。多选时，需要将绑定的值视为数组。
`<textarea>`	`input`	`value`	处理 `compositionstart` 和 `compositionend` 事件，以支持中文输入法。
自定义组件	`update:modelValue`	`modelValue`	通过 `modelValue` prop 传递值，并通过 `update:modelValue` 事件通知父组件更新值。这个行为可以通过 `modelModifiers` 进行自定义，比如 `.trim`、`.number`、`.lazy`。

四、源码剖析：vModelText、vModelCheckbox 等函数的秘密

Vue 编译器内部使用了一系列函数来处理不同类型的 v-model 指令。这些函数位于 packages/compiler-core/src/transforms/vModel.ts 文件中。

我们重点关注几个关键函数：

vModelText(node, binding, context): 处理 <input type="text"> 和 <textarea> 元素的 v-model。
vModelCheckbox(node, binding, context): 处理 <input type="checkbox"> 元素的 v-model。
vModelRadio(node, binding, context): 处理 <input type="radio"> 元素的 v-model。
vModelSelect(node, binding, context): 处理 <select> 元素的 v-model。

这些函数的主要任务是：

生成事件监听代码：根据元素类型选择合适的事件进行监听 (input、change 等)。
生成更新属性的代码：根据元素类型选择合适的属性进行更新 (value、checked 等)。
处理特殊情况：比如，处理 compositionstart 和 compositionend 事件以支持中文输入法，处理 multiple 属性以支持 <select> 元素的多选。

我们以 vModelText 函数为例，看看它的源码（简化版）：

function vModelText(node: ElementNode, binding: DirectiveBinding, context: TransformContext) {
  const { modifiers } = binding;
  const event = modifiers.lazy ? 'change' : 'input'; // 是否使用 lazy 修饰符
  const eventName = createSimpleExpression(event, true);

  // 生成事件处理函数的代码
  const eventValue = '$event.target.value';
  const assignmentExp = createAssignmentExpression(binding.exp, createSimpleExpression(eventValue, false));

  // 添加事件监听器
  const props = [
    createObjectProperty(
      createSimpleExpression('onUpdate:modelValue', true), // 自定义组件使用
      createFunctionExpression(
        undefined,
        [createSimpleExpression('$event', false)],
        createBlockStatement([
          createExpressionStatement(
            createAssignmentExpression(binding.exp, createSimpleExpression('$event', false))
          )
        ])
      )
    ),
    createObjectProperty(
      createSimpleExpression(`on${capitalize(event)}`, true),
      createFunctionExpression(
        undefined,
        ['$event'],
        createBlockStatement([
          createExpressionStatement(assignmentExp)
        ])
      )
    )
  ];

  return props;
}

这段代码的核心逻辑是：

根据 lazy 修饰符决定监听 input 事件还是 change 事件。
生成事件处理函数，该函数会将事件对象 ($event) 的 target.value 赋值给绑定的数据属性 (binding.exp)。
将事件监听器添加到元素的 props 中。

其他 vModelXXX 函数的逻辑类似，只是在事件类型、属性名称和特殊处理方面有所不同。

五、代码生成阶段：将 AST 转化为 JavaScript 渲染函数

在代码生成阶段，编译器会遍历转换后的 AST，将 AST 节点转换成 JavaScript 代码。对于包含 v-model 指令的节点，编译器会根据之前生成的 props 和事件监听器代码，生成对应的渲染函数代码。

例如，对于以下模板：

<template>
  <input type="text" v-model="message">
</template>

编译器可能会生成类似下面的渲染函数代码（简化版）：

import { withModel } from 'vue'
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("input", _mergeProps({
    type: "text",
    "onUpdate:modelValue": ($event) => _ctx.message = $event,
    onInput: ($event) => _ctx.message = $event.target.value
  }, { modelValue: _ctx.message }), null, 16))
}

这段代码的关键点在于：

使用了 onInput 事件监听器，该监听器会将输入框的值赋值给 _ctx.message（message 数据属性）。
使用了 modelValue prop，将 _ctx.message 的值绑定到输入框的 value 属性上。
使用了 onUpdate:modelValue prop，用于自定义组件，将组件内部的值传递给父组件。
withModel 是一个辅助函数，用于处理 v-model 的一些细节，比如处理 modelModifiers。

六、modelModifiers：v-model 的“变形金刚”

modelModifiers 允许我们自定义 v-model 的行为。常见的修饰符包括：

.trim：自动去除输入框值的首尾空格。
.number：将输入框的值转换为数字。
.lazy：将更新时机从 input 事件改为 change 事件。

编译器在处理 modelModifiers 时，会将它们添加到事件处理函数中。例如，对于以下模板：

<template>
  <input type="text" v-model.trim="message">
</template>

编译器可能会生成类似下面的渲染函数代码（简化版）：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("input", {
    type: "text",
    "onUpdate:modelValue": ($event) => _ctx.message = $event.trim(),
    onInput: ($event) => _ctx.message = $event.target.value.trim()
  }, null, 8, ["onInput"]))
}

可以看到，编译器在事件处理函数中添加了 trim() 方法，从而实现了去除空格的功能。

七、自定义组件的 v-model：更灵活的双向绑定

v-model 也可以用于自定义组件。在这种情况下，我们需要遵循以下约定：

组件应该接受一个名为 modelValue 的 prop，用于接收父组件传递的值。
组件应该在内部通过 emit('update:modelValue', newValue) 触发一个名为 update:modelValue 的事件，将新的值传递给父组件。

例如，我们可以创建一个名为 MyInput 的自定义组件：

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

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

然后，我们可以在父组件中使用 v-model 来绑定 MyInput 组件：

<template>
  <MyInput v-model="message"></MyInput>
</template>

<script>
import MyInput from './MyInput.vue'

export default {
  components: {
    MyInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

编译器在处理自定义组件的 v-model 时，会生成类似下面的渲染函数代码（简化版）：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_resolveComponent("MyInput"), {
    modelValue: _ctx.message,
    "onUpdate:modelValue": ($event) => _ctx.message = $event
  }, null, 8, ["modelValue", "onUpdate:modelValue"]))
}

这段代码的关键点在于：

将 _ctx.message 的值传递给 MyInput 组件的 modelValue prop。
监听 MyInput 组件的 update:modelValue 事件，并将事件的值赋值给 _ctx.message。

八、总结：v-model 的“七十二变”

v-model 是 Vue 中一个非常强大和灵活的指令。编译器通过一系列巧妙的处理，使得 v-model 能够适应各种不同的元素类型和自定义组件。

总而言之，Vue 编译器在处理 v-model 时，主要做了以下几件事：

识别 v-model 指令，并根据元素类型选择合适的处理策略。
生成事件监听代码，监听合适的事件（input、change 等）。
生成更新属性的代码，更新合适的属性（value、checked 等）。
处理特殊情况，比如中文输入法、多选等。
处理 modelModifiers，自定义 v-model 的行为。
对于自定义组件，生成传递 modelValue prop 和监听 update:modelValue 事件的代码。

希望今天的分享能够帮助大家更好地理解 Vue 3 编译器是如何处理 v-model 指令的。

今天的讲座就到这里，感谢大家的聆听！如果有什么问题，欢迎随时提问。

发表回复 取消回复

发表回复取消回复