组合式函数中用 ref 管理错误状态，需以 ref(null) 初始化并整体替换值；配合 loading、data 实现三态控制，封装为 useApi 等可复用 Hook，确保响应式更新与状态隔离。
用 ref 显式声明错误状态
错误状态本身需要响应式更新，才能触发视图重绘。推荐用 `ref(null)` 初始化错误值，类型建议为 Error | null（尤其搭配 TypeScript）：
-
初始化：
const error = ref(null) -
清空错误：
error.value = null -
赋值错误：
error.value = new Error('请求失败')或直接赋值捕获到的err - 模板中可直接使用
{{ error?.message }}，无需.value
在异步操作中联动 error 和 loading
典型场景如 API 调用，应同时管理加载、成功、失败三态。`ref` 可清晰表达这种状态流：
- 定义
const loading = ref(false)、const data = ref、(null) const error = ref(null) - 在
try块中置loading.value = true→ 执行异步 → 成功后赋值data.value并清空error - 在
catch中赋值error.value = err，并确保loading.value = false - 最后用
finally统一收尾加载状态，避免遗漏
封装成可复用的组合式函数
把错误处理逻辑抽离为自定义 Hook，比如 useApi，内部用 `ref` 管理状态，对外只暴露响应式变量和触发函数：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 函数返回
{ data, error, loading, execute }，全部为ref -
execute是个方法，内部包裹 try/catch，自动更新各 ref 状态 - 调用方无需关心错误如何赋值，只需绑定
v-if="error"或显示提示 - 多个组件可独立调用，彼此状态隔离
注意 ref 错误值的响应式边界
`ref` 保证的是“值被替换”这一动作可响应，但不代理错误对象内部属性变更（错误对象本身不可变）。因此：
- 不要试图修改
error.value.message—— 应该整体替换error.value - 若需扩展错误信息（如加时间戳、来源标识），建议新建一个带元数据的错误对象再赋值
- 避免将
error.value解构使用（如const { message } = error.value），否则会丢失响应性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
