Vue 3 响应式系统无法响应 BigInt，因其为不可代理的原始类型；需用 ref 包装并显式赋值更新（如 .value = newVal），避免原地运算；配合 json-bigint 处理后端长 ID，防止精度丢失。
Vue 3 的响应式系统无法直接响应 BigInt 类型，因为它是不可代理的原始值；不处理会导致视图不更新、ID 显示为 0 或末尾数字错乱，甚至控制台警告“value cannot be made reactive”。核心要抓住两点：用 ref 包装 + 显式赋值更新，而非原地运算。
为什么 reactive() 对 BigInt 失效？
reactive() 内部基于 Proxy，只能代理对象、数组、Map 等可扩展结构。BigInt 是原始类型（primitive），和 string、number 一样，Proxy 无法拦截其属性访问或运算。直接写：
- ❌ const state = reactive({ id: 123456789012345678901234567890n }); —— Vue 会静默忽略该字段，id 变成普通只读属性，修改后页面无反应
- 开发模式下可能提示 “value cannot be made reactive”，但生产环境不报错，问题更隐蔽
正确做法：ref() + .value = 显式赋值
ref 支持包装任意值，包括 BigInt，且其 .value 是响应式入口。关键在于：所有更新必须通过 .value = 新值 触发追踪，不能依赖 ++、+= 等看似简洁实则失效的操作。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ const id = ref(123456789012345678901234567890n);
- ✅ id.value = id.value + 1n; 或 id.value += 1n;（Vue 3.4+ 已支持 += 的响应式赋值）
- ❌ id.value++; —— 返回旧值，且无赋值动作，不会触发更新
- ❌ id.value += "1"; —— 类型错误，BigInt 不与字符串自动转换
统一管理：封装 useBigIntRef 工具函数
手动写 .value = 容易遗漏，尤其在多处增减 ID 的场景。推荐封装一个带语义方法的安全响应式包装器：
立即学习“前端免费学习笔记（深入）”；
- 返回对象含 .value（响应式原始值）、.inc()（+1n）、.add(n)（+n）、.set(n)（重设）
- 内部始终走
self.value = ...，杜绝原地误操作 - 自动校验输入：支持传入字符串（如
"1234567890123456789"），内部转为 BigInt；非合法数字抛错提示 - 示例：
const orderId = useBigIntRef("13579246810111213"); console.log(orderId.value); // 13579246810111213n
对接后端长 ID：axios + json-bigint 配合使用
前端显示错乱，往往源头在接口响应阶段。后端返回的雪花 ID（如 13579246810111213）被 JSON.parse 自动转成 Number，超出 2^53 - 1 就静默失真。
- 安装：
npm install json-bigint - 配置 axios transformResponse：
transformResponse: [(data) => JSONbig.parse(data)] - 结果中原本的
{ "id": 13579246810111213 }会变成{ "id": "13579246810111213" }（字符串）或13579246810111213n（取决于 json-bigint 选项） - 后续在组件中：用
useBigIntRef(res.data.id)接入响应式流，避免手动 toString() 或 Number() 转换
