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

v-model 是 Vue 中的一个指令，用于在表单控件（如 <input>、<textarea>、<select> 等）和组件上实现双向数据绑定。它的作用是简化表单输入和应用状态之间的同步。

---

1. v-model 的作用

v-model 的主要作用是：

• 将表单控件的值与 Vue 实例中的数据进行绑定。
• 当用户输入内容时，自动更新 Vue 实例中的数据。
• 当 Vue 实例中的数据发生变化时，自动更新表单控件的值。

---

2. v-model 的实现原理

v-model 实际上是语法糖，它结合了 :value（绑定数据）和 @input（监听输入事件）的功能。

例如：

<input v-model="message">

等价于：

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

• :value="message"：将 input 的值绑定到 message。
• @input="message = $event.target.value"：当用户输入时，更新 message 的值。

---

3. v-model 在表单控件中的使用

v-model 可以用于多种表单控件：

文本输入框

<input type="text" v-model="username">

多行文本

<textarea v-model="description"></textarea>

复选框

• 单个复选框（绑定布尔值）：

  <input type="checkbox" v-model="isChecked">

• 多个复选框（绑定数组）：

  <input type="checkbox" value="apple" v-model="fruits">
  <input type="checkbox" value="banana" v-model="fruits">

单选框

<input type="radio" value="male" v-model="gender">
<input type="radio" value="female" v-model="gender">

下拉选择框

<select v-model="selectedOption">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</select>

---

4. v-model 在自定义组件中的使用

v-model 也可以用于自定义组件，实现父子组件之间的双向绑定。

默认行为

默认情况下，v-model 在组件上会绑定 value 属性和监听 input 事件。

• 父组件：

  <CustomInput v-model="message" />

• 子组件：

  export default {
    props: ['value'],
    methods: {
      updateValue(event) {
        this.$emit('input', event.target.value);
      },
    },
  };

自定义 v-model

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

• 子组件：

  export default {
    model: {
      prop: 'selected', // 绑定的属性名
      event: 'change',  // 监听的事件名
    },
    props: ['selected'],
    methods: {
      updateValue(event) {
        this.$emit('change', event.target.value);
      },
    },
  };

---

5. v-model 的修饰符

Vue 为 v-model 提供了一些修饰符，用于处理特定的场景：

• .lazy：将 input 事件改为 change 事件（在输入完成后才更新数据）。

  <input v-model.lazy="message">

• .number：将输入值转为数字类型。

  <input v-model.number="age" type="number">

• .trim：自动去除输入值两端的空格。

  <input v-model.trim="username">

---

6. 总结

• v-model 的作用：实现表单控件和组件与 Vue 实例数据的双向绑定。
• 实现原理：语法糖，结合 :value 和 @input。
• 适用场景：表单控件、自定义组件。
• 修饰符：.lazy、.number、.trim 等。

v-model 是 Vue 中非常强大的特性，能够极大地简化表单处理逻辑。