面试题：Vue 中 v-model 是如何实现的？

v-model 是 Vue 中用于实现双向数据绑定的指令，通常用于表单元素（如 <input>、<textarea>、<select>）和自定义组件。它的实现原理可以总结为以下两个方面：

1. 在原生表单元素上的实现

在原生表单元素上，v-model 是 v-bind 和 v-on 的语法糖。

实现原理

v-model 将 value 属性绑定到数据（v-bind:value）。
监听 input 事件，当用户输入时更新数据（v-on:input）。

示例：

<input v-model="message" />

等价于：

<input :value="message" @input="message = $event.target.value" />

说明：

v-model 会根据表单元素的类型自动绑定不同的属性和事件：
- <input type="text"> 和 <textarea>：绑定 value 属性和 input 事件。
- <input type="checkbox"> 和 <input type="radio">：绑定 checked 属性和 change 事件。
- <select>：绑定 value 属性和 change 事件。

2. 在自定义组件上的实现

在自定义组件上，v-model 的实现依赖于组件的 model 选项或 v-bind 和 v-on 的组合。

方法 1：使用 `model` 选项

通过 model 选项自定义 v-model 绑定的属性和事件。

示例：

<!-- 父组件 -->
<custom-input v-model="message" />

<!-- 子组件 CustomInput.vue -->
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  model: {
    prop: 'value', // 绑定的属性名
    event: 'input', // 监听的事件名
  },
  props: {
    value: {
      type: String,
      required: true,
    },
  },
};
</script>

说明：

model 选项指定了 v-model 绑定的属性（value）和事件（input）。
父组件通过 v-model 绑定数据，子组件通过 props 接收数据并通过 $emit 触发事件更新数据。

方法 2：使用 `v-bind` 和 `v-on`

如果不使用 model 选项，可以通过 v-bind 和 v-on 手动实现 v-model 的功能。

示例：

<!-- 父组件 -->
<custom-input :value="message" @input="message = $event" />

<!-- 子组件 CustomInput.vue -->
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
  },
};
</script>

说明：

父组件通过 v-bind 绑定 value 属性，通过 v-on 监听 input 事件。
子组件通过 props 接收数据并通过 $emit 触发事件更新数据。

3. `v-model` 的扩展用法

在 Vue 2.3+ 和 Vue 3 中，v-model 支持多个绑定和自定义修饰符。

多个绑定（Vue 3）

在 Vue 3 中，v-model 支持多个绑定，可以为同一个组件绑定多个 v-model。

示例：

<custom-form v-model:username="username" v-model:password="password" />

说明：

通过 v-model:propName 实现多个绑定。
子组件需要通过 props 接收多个属性，并通过 $emit 触发多个事件。

自定义修饰符

可以通过 model 选项或 v-bind 和 v-on 实现自定义修饰符。

示例：

<custom-input v-model.trim="message" />

说明：

.trim 是 Vue 内置的修饰符，用于自动去除用户输入的首尾空格。
可以通过 model 选项或 v-bind 和 v-on 实现自定义修饰符。

4. 总结

v-model 的实现原理可以总结为：

在原生表单元素上：
- 绑定 value 属性（v-bind:value）。
- 监听 input 事件（v-on:input）。
在自定义组件上：
- 使用 model 选项自定义绑定的属性和事件。
- 或通过 v-bind 和 v-on 手动实现。
扩展用法：
- 支持多个绑定（Vue 3）。
- 支持自定义修饰符。

通过 v-model，Vue 提供了一种简洁的方式实现双向数据绑定，适用于表单元素和自定义组件。

THE END

Vue 进阶面试题