Vue 3 中应统一用 reactive 管理复杂状态，核心是分层建模、类型约束、原子更新和 composable 封装：顶层为领域聚合根，子层按职责隔离，禁止跨层直写；必须定义 TypeScript 接口并严格类型断言；更新须通过 updateXxx 方法校验与副作用处理；状态导出须封装为 useXxx composable 并用 toRefs 暴露。
团队在 Vue 3 中统一用 reactive 管理复杂业务状态，关键不是“能不能用”，而是“怎么用才不散、不乱、不崩”。核心标准围绕可维护性、可读性、可测试性展开，不追求炫技，重在落地稳定。
状态结构必须分层建模，禁止扁平堆砌
复杂状态（如订单配置、表单流程、仪表盘布局）不能直接塞进一个大对象里。要按业务语义拆解层级：
-
顶层为领域聚合根：例如
orderConfig、dashboardState，只暴露关键字段和操作入口 -
子层按职责隔离：比如
orderConfig.payment、orderConfig.shipping、orderConfig.validation，各自封装逻辑边界 -
避免跨层直写：不允许
state.payment.method = 'alipay'这类裸操作，必须通过明确的方法或 computed setter 封装
所有 reactive 状态必须配 TypeScript 接口，且类型不可省略
不写接口 = 默认 any，等于放弃类型安全。标准写法：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 先定义
interface OrderConfig，包含完整嵌套结构与可选/必填标识 - 初始化时严格类型断言：
const state = reactive<orderconfig>({ ... })</orderconfig> - 嵌套对象也需独立接口（如
PaymentMethod），禁止内联类型或any - 接口中使用
readonly标记只读字段（如id: readonly string），防止误改
响应式更新必须走原子方法，禁用直接属性赋值
直接修改深层属性（如 state.user.profile.avatar = url）易漏依赖、难调试、无法拦截校验。统一规范：
立即学习“前端免费学习笔记（深入）”；
- 每个子模块提供
updateXxx()方法，例如updateShipping({ address, method }) - 方法内部做数据校验、副作用触发（如清空相关缓存）、日志埋点
- 对数组操作统一用
splice/push等 Proxy 可捕获的方式，不用下标赋值 - 需要替换整个子对象时，用
Object.assign(state.xxx, newData)或解构合并，而非state.xxx = newData（后者会丢失响应性）
状态导出必须封装为 composable，禁止裸 reactive 对象外泄
把 reactive 当全局变量到处 import 是反模式。标准做法：
- 每个业务域封装成独立的
useOrderConfig()、useDashboardState() - composable 内部创建 reactive，并返回带业务语义的方法和计算属性（如
isEditable、hasError） - 对外暴露一律用
toRefs()或toRef()，确保解构后仍响应式 - 若需跨组件共享，通过
provide/inject注入 composable 返回值，而非注入原始 reactive 对象
