Vue 3：如何将多个ref变量合并为一个

嘿，要把这些零散的ref变量合并成一个，最简洁的方式就是用单个ref包裹一个响应式对象，这样既能保持每个属性的响应式，又能统一管理所有状态，代码看起来也更整洁！

具体实现代码 #

把原来的多个独立ref，改成一个包含所有属性的ref对象：

// 合并后的单个ref
const combinedState = ref({
  variable1: false,
  variable2: '',
  variable3: false,
  variable4: false,
  variable5: false,
  variable6: false
})

如何访问和修改状态 #

之后你要操作这些属性的时候，只需要通过.value访问对象里的属性即可：

• 读取值：combinedState.value.variable1
• 修改值：combinedState.value.variable1 = true

在Vue模板里使用的话，甚至可以省略.value，直接写：

<template>
  <div>{{ combinedState.variable1 }}</div>
  <input v-model="combinedState.variable2" />
</template>

额外小提示 #

如果你是在Vue 3的<script setup>中，也可以考虑用reactive来创建响应式对象：

const combinedState = reactive({
  variable1: false,
  variable2: '',
  // ...其他属性
})

不过要注意，reactive返回的是代理对象，如果需要把整个状态传递给子组件，或者要对整个状态做赋值操作，用ref包裹对象会更灵活（避免解构或传递时丢失响应式）。

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