面试题：什么是 Vue 的 v-model？有什么作用？

v-model 是 Vue 中一个非常强大且常用的指令（Directive），它本质上是语法糖，用于在表单元素或组件上创建双向数据绑定（Two-way Data Binding）。

---

一、什么是 v-model？

v-model 可以看作是：

• v-bind（绑定数据到元素）
• 和 v-on（监听输入事件并更新数据）
  的语法糖组合。

它让开发者可以用一行代码实现“数据 → 视图”和“视图 → 数据”的自动同步。

---

二、v-model 的作用

1. 实现双向数据绑定
   • 当数据变化时，视图自动更新。
   • 当用户在表单中输入时，数据自动更新。
2. 简化表单处理代码
   • 无需手动监听 input、change 等事件来更新数据。
3. 支持多种表单元素
   • input、textarea、select、复选框、单选框等。
4. 可扩展到自定义组件
   • 让自定义组件也支持 v-model。

---

三、v-model 在不同表单元素上的行为

1. 普通文本输入框（<input type="text">）

<template>
  <input v-model="message" placeholder="输入内容" />
  <p>你输入的是: {{ message }}</p>
</template>

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

✅ 等价于：

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

---

2. 复选框（<input type="checkbox">）

<template>
  <input type="checkbox" v-model="isChecked" />
  <label>是否同意</label>
  <p>状态: {{ isChecked ? '已同意' : '未同意' }}</p>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

✅ 绑定的是 checked 状态，值为 true / false。

---

3. 单选框（<input type="radio">）

<template>
  <input type="radio" v-model="gender" value="male" id="male" />
  <label for="male">男</label>

  <input type="radio" v-model="gender" value="female" id="female" />
  <label for="female">女</label>

  <p>选择的性别: {{ gender }}</p>
</template>

<script>
export default {
  data() {
    return {
      gender: 'male'
    }
  }
}
</script>

✅ 多个单选框共享同一个 v-model，值为选中项的 value。

---

4. 下拉选择框（<select>）

<template>
  <select v-model="selected">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
  <p>选择的水果: {{ selected }}</p>
</template>

<script>
export default {
  data() {
    return {
      selected: 'apple'
    }
  }
}
</script>

✅ 支持多选（添加 multiple 属性，v-model 绑定数组）。

---

四、v-model 的修饰符

Vue 提供了几个修饰符来简化常见操作：

修饰符	作用	示例
.lazy	将 input 事件改为 change 事件（失去焦点时更新）	v-model.lazy="msg"
.number	自动将输入值转换为数字	v-model.number="age"
.trim	自动去除输入值的首尾空格	v-model.trim="username"

<input v-model.number="age" type="number" />
<!-- 输入 "123" 会自动转为数字 123 -->

---

五、v-model 在自定义组件中的使用（Vue 3）

在 Vue 3 中，v-model 是 :modelValue + @update:modelValue 的语法糖。

1. 子组件（CustomInput.vue）

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

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

2. 父组件使用

<template>
  <CustomInput v-model="message" />
  <!-- 等价于 -->
  <!-- <CustomInput :modelValue="message" @update:modelValue="message = $event" /> -->
</template>

✅ Vue 3 扩展：支持多个 v-model：

<UserEditor 
  v-model:name="userName" 
  v-model:age="userAge" 
/>

---

六、总结

特性	说明
本质	v-bind + v-on 的语法糖
核心作用	实现表单元素与数据的双向绑定
适用元素	input、textarea、select、checkbox、radio 等
修饰符	.lazy、.number、.trim
组件支持	可通过 modelValue / update:modelValue 实现
优势	简化代码，提升开发效率

✅ 一句话总结：
v-model 是 Vue 中用于实现表单数据双向绑定的便捷指令，它让开发者无需手动监听事件即可实现数据与视图的自动同步，是开发表单类功能的利器。