面试题：Vue中v-model在复杂表单单选框组中的应用

Question

在Vue项目里，有一个复杂表单包含一组单选框，代表不同的兴趣爱好，后端期望接收数组形式的选中值。请用v-model实现该功能，并描述v-model在这个场景下的数据双向绑定原理。

Answer 1

实现代码

假设我们有如下的单选框组：

<template>
  <div>
    <label v-for="(hobby, index) in hobbies" :key="index">
      <input type="radio" :value="hobby" v-model="selectedHobbies">
      {{ hobby }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hobbies: ['阅读', '运动', '音乐', '绘画'],
      selectedHobbies: []
    }
  }
}
</script>

v-model双向绑定原理

1. 输入到数据：当用户点击单选框时，Vue的 v-model 指令会捕获 input 事件，将当前选中的 radio 的 value 值更新到 selectedHobbies 数组中。这是因为 v-model 本质上是 :value 和 @input 的语法糖。在这个场景下，:value 绑定了每个 radio 的具体值，@input 事件触发时会更新 selectedHobbies。
2. 数据到输入：当 selectedHobbies 数组由于其他操作（比如通过代码动态修改）发生变化时，Vue的响应式系统会检测到这个变化，并重新渲染视图。此时，v-model 会根据 selectedHobbies 数组中的值，来决定哪个 radio 应该被选中，从而更新视图。通过这种方式，实现了数据和视图之间的双向绑定。