reactive(...)适合：对象/表单/多字段状态，不用 .value
<template>
<input v-model="form.username" placeholder="用户名" />
<input v-model="form.password" placeholder="密码" type="password" />
<button @click="login">登录</button>
<pre>{{ form }}</pre>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const form = reactive({
username: '',
password: '',
})
function login() {
console.log(form.username, form.password)
}
</script>
要点：
- reactive 返回的是一个响应式对象，访问字段直接 form.username
- 适合表单这种“多个字段一起管理”的场景
简单规则：
- 单个值 / 基础类型：用 ref
- 一坨字段组成的对象：用 reactive
- 两者可以混用：比如
const state = reactive({
loading: false,
list: [] as User[]
})
- state.loading 是 boolean
- state.list 被明确标注成 User[]（否则空数组 [] 有时会推导得不够精确）
可以这样配套定义 User：
type User = { id: number; name: string }
const state = reactive({
loading: false,
list: [] as User[],
})
还有一种更“类型安全”的写法（可选）
用泛型把结构一次性约束住（避免随手 as 断言）：
type User = { id: number; name: string }
const state = reactive<{ loading: boolean; list: User[] }>({
loading: false,
list: [],
})
两种都能用；第一种更常见更快写，第二种在团队严格规范时更稳。
