Vue Composition API中如何实现数组及数组对象的响应式？

问题原因 #

你修改后表单失去响应式的核心原因是表单数据结构变了，但v-model绑定的路径没有同步调整，和你用ref还是reactive定义无关：

• 原先form是单个对象，绑定form.serialNum可以直接命中对应属性
• 修改后form是长度为1的数组，实际表单对象存在数组的第0位，原绑定路径找不到对应属性，自然失去响应式

可行解决方案 #

方案1：直接使用数组结构存储表单，调整绑定路径 #

ref和reactive都支持数组类型的响应式，二选一即可：

写法1：用ref定义数组

script代码保持你的原有写法即可：

let form = ref([{
  eqpmntType: "",
  make: "",
  modelNum: "",
  serialNum: "",
  // 其余属性省略
}])

模板中所有表单项的v-model加上[0]指定数组索引即可：

<input
  class="input"
  placeholder="Serial #"
  v-model="form[0].serialNum"
/>
<!-- 其余表单项都按照form[0].属性名的格式修改即可 -->

写法2：用reactive定义数组

reactive本身支持数组类型，不需要强制用ref：

let form = reactive([{
  eqpmntType: "",
  make: "",
  modelNum: "",
  serialNum: "",
  // 其余属性省略
}])

模板绑定路径和上面ref的写法完全一致，都是form[0].属性名。

方案2：保持原有单对象表单结构，提交时再封装为数组（更推荐） #

不需要为了适配后端的参数格式修改前端的表单结构，原有代码完全不用改，提交接口时构造参数即可：

// 提交接口时的处理逻辑
const submitForm = async () => {
  // 直接把原有form对象包裹进数组即可
  const submitData = [form]
  // 把submitData传给后端接口
  await api.submitEqpmnt(submitData)
}

这种写法不需要调整任何表单项的绑定逻辑，代码改动量最小，也更符合前端表单的常规使用习惯。

额外补充 #

之前你对reactive的理解有偏差：reactive可以支持所有引用类型的数据，包括普通对象、数组、Map、Set等，只有字符串、数字、布尔值这类基础类型才必须用ref定义。

内容的提问来源于stack exchange，提问作者Alan