vue处理后端api数据需先响应化再结构适配：简单字段用ref，复杂对象用reactive；必须提前转换字段名和嵌套结构，避免模板硬拆；异步请求中响应式变量须在setup阶段声明默认值，确保视图更新。
Vue 处理后端 API 返回的数据，核心在于两点：一是让数据变成响应式，二是适配组件需要的结构。后端返回的原始 JSON 通常只是普通对象，直接赋值给模板不会触发更新；同时字段名、嵌套层级也常和组件（比如树形选择器、表格、表单）不匹配。所以不能只“接回来就用”，得做转换+响应化。
用 ref 或 reactive 包裹接口数据
拿到响应数据后，必须用 Vue 的响应式 API 封装，否则视图不会自动更新。
- 简单数据或需单独访问的字段（如总数、开关状态），用 ref：
const total = ref(0)，后续赋值写total.value = res.data.total - 结构较复杂的对象或列表（如用户列表、菜单树），优先用 reactive：
const userList = reactive([])，然后直接userList.push(...res.data.list)或Object.assign(userList, res.data) - 避免对整个响应对象套一层 ref（如
ref(res)），既冗余又增加 .value 层级；也不要用reactive(res.data)直接包裹未清洗的后端数据，可能含不可代理属性（如 Date、Map）
结构转换要提前做，别在模板里硬拆
后端字段名（userId、deptName）和前端组件要求（id、label）不一致时，应在请求回调中完成映射，而不是靠 v-for 里写 {{ item.userId }} 或用 computed 临时处理。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章