Vue 3 本身不提供响应拦截器，该功能由 axios 等 HTTP 客户端实现；将驼峰转下划线虽可行但不推荐，因破坏 JS 访问习惯、冲突 TypeScript 类型与 Vue 响应式，且易引发性能与维护问题。
Vue 3 本身不提供“响应拦截器”功能，这个能力来自 HTTP 客户端（如 axios）。所谓“对返回的驼峰命名转换为下划线”，实际是服务端返回的是驼峰字段（如 userName），前端希望在业务层统一转成下划线（如 user_name）再使用——但要注意：这通常不是推荐做法，反而更常见的是服务端返回下划线，前端转驼峰以适配 JS 变量习惯。如果你确实需要在响应拦截中把驼峰转下划线，请看下面几个关键点和实现方式。
为什么一般不这么做？
前端接收数据后转成下划线命名，会带来明显问题：
- JS 对象属性含下划线（如
user_name）无法用点号安全访问（obj.user_name可行，但失去语义连贯性） - 与 Vue 响应式、TypeScript 接口、Pinia store 字段定义习惯冲突
- 多数团队规范是「后端返回下划线，前端自动转驼峰」，而非反过来
- 若服务端已用驼峰（如 Spring Boot + Jackson 默认），说明它面向 JS 生态设计，强行转下划线反而增加冗余
如果真要转：用 axios 响应拦截器 + 递归函数
假设你确认需将响应 data 中所有驼峰键名（如 createTime → create_time）批量转为下划线，可这样写：
先定义转换函数：
立即学习“前端免费学习笔记（深入）”；
function camelToSnake(str) {
return str.replace(/([a-z0-9])([A-Z])/g, '$1_$2').toLowerCase();
}
function deepCamelToSnake(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (Array.isArray(obj)) return obj.map(deepCamelToSnake);
const result = {};
for (const [key, value] of Object.entries(obj)) {
const newKey = camelToSnake(key);
result[newKey] = deepCamelToSnake(value);
}
return result;
}
再在 axios 拦截器中应用：
axios.interceptors.response.use(
response => {
if (response.data && typeof response.data === 'object') {
response.data = deepCamelToSnake(response.data);
}
return response;
},
error => Promise.reject(error)
);
注意边界情况和风险
-
数据库字段映射问题（如 createTime/updateTime）：这不是响应拦截该解决的。真正原因常是后端实体类字段名（
createTime）与数据库列名（create_time）不一致，应在后端配置 MyBatis 或 JPA 的字段映射（如@Column(name = "create_time")），或开启全局驼峰转下划线（Spring Boot 中mybatis.configuration.map-underscore-to-camel-case=true） -
忽略敏感字段：比如 token、password、URL 等不应被重命名，建议在
deepCamelToSnake中加白名单/黑名单逻辑 - 性能开销：深度遍历 + 正则替换对大嵌套对象有影响，生产环境慎用于高频接口（如列表页上千条数据）
-
类型丢失：TypeScript 接口仍按原始驼峰定义，转换后字段名不匹配，需同步维护两套类型或用
Record<string any></string>放宽校验
更合理的替代方案
与其在前端改字段名，不如推动标准化：
- 后端统一用下划线返回（主流 Java/Python 项目默认如此），前端用
toHump工具函数做一次转换（仅在请求成功后调用），不影响响应体结构 - 在 Pinia store 或 Composable 中封装数据适配层，只对特定接口做字段映射，而非全局拦截
- 用 Axios 的
transformResponse配置项替代拦截器，粒度更细、更可控
