响应式丢失源于脱离 Vue 代理追踪链，需避免解构 reactive/props、替换 reactive 引用、传入纯函数导致脱管，以及异步中误赋值；应使用 toRefs、保持引用、正确深拷贝和更新 .value。
在 Vue 3 组合式函数中，响应式丢失不是 Bug，而是对 Proxy 机制和响应式边界理解不到位的自然结果。核心原则就一条：**别让响应式数据脱离 Vue 的代理追踪链**。
避免直接解构 reactive 或 props
解构会提取原始值，切断与 Proxy 的连接。比如：
-
❌ 错误：
const { count } = reactive({ count: 0 })→count变成普通数字，修改不触发更新 -
❌ 错误：
const { title } = defineProps({ title: String })→title是静态快照，父组件改了也收不到 -
✅ 正确：用
toRefs包裹后再解构 ——const { count } = toRefs(state)，得到的是ref，读写需count.value（模板中可省略） -
✅ 正确：对
props不解构，统一用props.title访问，简洁可靠
不要替换整个 reactive 引用
reactive 返回的是一个代理对象，它的响应式能力绑定在该引用上。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
❌ 错误：
const state = reactive({ a: 1 }); state = { a: 2 };→ 新对象没被代理，彻底失活 -
✅ 正确：只改属性，不换引用 ——
state.a = 2或Object.assign(state, { a: 2 }) -
✅ 替代方案：若需整体重置，用
Object.assign(state, freshData)；或用ref管理顶层变量，它支持直接赋值
传入纯函数或第三方方法前做防护
很多工具函数（如 lodash.cloneDeep、JSON.parse(JSON.stringify())）会返回普通对象，响应式立即中断。
立即学习“前端免费学习笔记（深入）”；
-
❌ 错误：
const copy = JSON.parse(JSON.stringify(state))→ 失去响应式 -
✅ 正确：需要深拷贝时，优先用
structuredClone（保留部分响应式结构），或拷贝后重新reactive包裹 -
✅ 更稳妥：组合式函数内部尽量只操作原始响应式源，避免中间态“脱管”；必要时用
toRaw显式取原始值，再手动转回响应式
异步赋值要确保目标是响应式容器本身
常见误区是把 API 响应直接赋给一个局部变量，而非更新已有响应式对象的属性。
-
❌ 错误：
const data = ref(null); const res = await api.get(); data = res;→data被重新赋值，原ref引用丢失 -
✅ 正确：
data.value = res;或Object.assign(state, res)（如果state是reactive） -
✅ 提示：组合式函数返回值中暴露的响应式数据，应始终是原始
ref或reactive实例，而不是它们的解构结果或计算副本
