Vue 3 中推荐用多个 ref 管理表单多输入项，每个 ref 对应一个字段并用 v-model 绑定，语义清晰、易维护；也可用 reactive + toRefs 统一管理并解构使用。
在 Vue 3 中，ref 本身不直接支持“双向绑定”语法（如 v-model 那样自动同步），但你可以用 ref 存储输入值，并结合 @input 或 @change 手动更新，从而实现对多个表单输入项的精细化控制。不过更推荐、更简洁的方式是：**用 ref 获取 DOM 元素引用，再配合响应式数据（如 ref 或 reactive）做值管理**——这才是实际开发中“用 ref 实现表单多输入项双向绑定”的常见含义。
用 ref 管理多个输入值（推荐：语义清晰、易维护）
为每个输入项单独定义一个 ref，并在模板中用 v-model 绑定它们。虽然用了多个 ref，但这是完全合法且 Vue 官方推荐的做法：
- 每个
ref对应一个字段，逻辑隔离，调试和验证都方便 -
v-model在 Vue 3 中默认对ref值做双向同步（底层调用.value） - 提交时直接读取各
ref.value即可
示例：
import { ref } from 'vue'
export default {
setup() {
const username = ref('')
const email = ref('')
const age = ref(0)
const submit = () => {
console.log({ username: username.value, email: email.value, age: age.value })
}
return { username, email, age, submit }
}
}
模板中：
立即学习“前端免费学习笔记（深入）”；
<input v-model="username" placeholder="用户名" /> <input v-model="email" type="email" placeholder="邮箱" /> <input v-model.number="age" type="number" placeholder="年龄" /> <button @click="submit">提交</button>
用 ref 获取 DOM 元素并手动同步（适合特殊场景）
当你需要直接操作原生 input 元素（比如聚焦、选择文本、兼容非标准控件），可用 ref 获取 DOM 引用，再通过事件手动赋值：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 给每个
<input>添加ref属性（如ref="userInput"） - 在
setup中用同名ref(null)接收，确保类型是HTMLInputElement | null - 监听
@input，把$event.target.value赋给对应响应式变量
示例：
import { ref, reactive } from 'vue'
export default {
setup() {
const userInput = ref(null)
const emailInput = ref(null)
const formData = reactive({
username: '',
email: ''
})
const handleUsernameInput = (e) => {
formData.username = e.target.value
}
const handleEmailInput = (e) => {
formData.email = e.target.value
}
// 提交时可直接访问 formData
const submit = () => {
console.log(formData)
// 也可主动聚焦：userInput.value?.focus()
}
return {
userInput,
emailInput,
formData,
handleUsernameInput,
handleEmailInput,
submit
}
}
}
模板中：
立即学习“前端免费学习笔记（深入）”；
<input ref="userInput" @input="handleUsernameInput" :value="formData.username" placeholder="用户名" /> <input ref="emailInput" @input="handleEmailInput" :value="formData.email" type="email" placeholder="邮箱" />
统一管理多个字段：用 reactive + toRefs（兼顾结构与解构）
如果字段较多，用多个 ref 会略显冗余；这时可用 reactive 定义对象，再用 toRefs 解构，保持模板中仍能用 v-model：
-
reactive创建响应式对象，天然支持嵌套和批量操作 -
toRefs把对象每个属性转为独立ref，避免解构后丢失响应性 - 模板中仍写
v-model="username"，和单个ref写法一致
示例：
import { reactive, toRefs } from 'vue'
export default {
setup() {
const form = reactive({
username: '',
email: '',
password: '',
remember: false
})
const submit = () => {
console.log(form) // 直接用 reactive 对象提交
}
return {
...toRefs(form), // 解构出 username、email 等 ref
submit
}
}
}
注意事项和技巧
-
v-model默认绑定value和input事件；对type="number"加.number修饰符可自动转数字 - 表单重置时，不要直接赋值
ref = ''，而要改ref.value = '' - 如果使用组合式函数封装表单逻辑（如
useForm），内部通常也是基于reactive或多个ref实现 - 校验、禁用状态、动态 placeholder 等，都可基于这些响应式值计算或监听
