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 Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 列表类数据用 map 转换：
userList.splice(0, userList.length, ...res.data.map(u => ({ id: u.userId, name: u.userName, avatar: u.headImg }))) - 树形结构用递归函数标准化（如 Treeselect 要求
children字段）：const treeData = normalizeTree(res.data, { idKey: 'deptId', labelKey: 'deptName', childrenKey: 'subDepts' }) - 转换逻辑尽量抽成纯函数，便于单元测试和复用，不要散落在每个组件的 onMounted 里
异步加载时注意响应式时机
接口是异步的，但响应式变量必须在 setup 阶段就声明好，否则模板会报 undefined。
立即学习“前端免费学习笔记（深入）”；
- 声明时给默认值：
const loading = ref(true)、const list = ref([])、const userInfo = reactive({ name: '', email: '' }) - 请求成功后，直接赋值或替换内容，不要新建变量（如避免
list = ref(res.data)），否则会断开响应式连接 - 错误状态也要响应式管理：
const error = ref('')，并在 catch 中赋值，模板用v-if="error"控制提示
深层嵌套对象慎用 reactive
如果后端返回的是多层嵌套且部分字段无需响应（如日志详情里的原始字符串、第三方扩展字段），全用 reactive 会造成不必要的代理开销，甚至触发 Proxy 陷阱问题。
- 只对真正需要响应式更新的字段做 reactive，其余用普通对象存储
- 必要时用 toRef 提取子属性：
const { name, status } = toRefs(userInfo)，既能解构使用，又保持响应性 - 若需保留原始结构但只让部分字段响应，可用 shallowRef + 手动触发更新（适合大数据量场景）
