响应式丢失是变量脱离vue追踪链，因proxy/ref代理被切断；需用torefs或storetorefs保持引用，避免解构赋值或直接返回值拷贝。
在组合式函数中，响应式丢失不是数据“没了”，而是你操作的变量脱离了 Vue 的响应式追踪链。核心问题在于：Proxy 或 ref 的代理关系被切断，Vue 再也收不到变化通知。
为什么组合式函数里容易丢响应式
组合式函数本质是逻辑复用单元，它不自动绑定组件上下文。一旦你把响应式数据解构、赋值给新变量、或跨作用域传递，就可能断开代理连接。
-
解构 reactive 对象：直接写
const { count } = state，拿到的是普通数值，不是响应式引用 -
返回普通对象而非响应式包装：函数内部用
return { count: state.count }，返回的是值拷贝，不是 ref 或 reactive -
对 ref.value 解构：比如
const { name } = user.value，name 变成字符串，后续修改不会触发更新 -
异步回调中替换整个响应式变量：如
state = await api.get()，等于用普通对象覆盖了 reactive 代理
正确暴露响应式数据的写法
组合式函数必须明确返回可追踪的响应式引用，不能只返回原始值。
- 用
toRefs包裹 reactive 对象再解构：const { count, name } = toRefs(state)，每个属性都是 ref，模板中可直接用{{ count }} - 若源头是 ref({})，先取 .value 再转：
const { name } = toRefs(user.value) - 避免在函数内返回解构后的值；统一 return 解构结果（即 toRefs 后的对象）
- 需要计算或派生时，用
computed包一层，确保依赖链完整
常见组合式函数陷阱与修正
以下写法看似简洁，实则危险：
-
错误：
return { ...toRefs(state) }—— 展开后仍是 toRefs 返回的 ref，没问题；但若写成return { count: state.count }就失效 -
错误：
const data = useFetch(); const { list } = data;→ 若useFetch返回的是 reactive，这里解构就断链；应改为const { list } = toRefs(data) -
错误：在
onMounted中直接赋值state = response→ 应改用Object.assign(state, response)或逐个赋值 -
推荐：组合式函数内部统一用
ref管理基础类型，reactive管理结构，对外暴露一律经toRefs或保持 ref 形式
配合 storeToRefs 处理 Pinia 场景
当组合式函数接入 Pinia store 时，同样面临解构风险。不能直接 const { user } = useUserStore()。
- 必须用
storeToRefs：const { user, loading } = storeToRefs(useUserStore()) - 这样得到的
user是 ref，修改user.value.name或模板中用{{ user.name }}都能响应 - 注意：仅对 store 中的响应式属性使用
storeToRefs；方法或非响应式字段不用包
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
