Vue响应式“断连”源于传递、解构、计算或赋值方式不当：解构需用toRefs/toRef；计算属性须返回ref/computed；避免浅拷贝破坏代理；异步中ref须通过.value操作。
Vue.js 的响应式数据在复杂逻辑链中容易“断连”，不是因为响应式失效，而是因为中间环节脱离了响应式系统。关键不在数据本身，而在你如何传递、解构、计算和赋值。
解构时必须用 toRefs 或 toRef
从 reactive 对象直接解构会丢失响应性，这是最常见断裂点：
-
const user = reactive({ name: 'Alice', age: 25 }); const { name } = user;→name是普通字符串，改它不触发更新 - 正确做法：
const { name } = toRefs(user)或const name = toRef(user, 'name') -
toRefs适合批量解构；toRef更灵活，支持动态属性名或后续可能新增的字段
计算属性与函数返回值需保持 ref 包装
复杂逻辑常封装在函数或 computed 中，但返回普通对象/数组会切断响应链：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 错误示例：
const getProfile = () => ({ ...user, level: user.age > 18 ? 'adult' : 'minor' })→ 返回 plain object，不响应 - 正确做法：用
computed包裹，或返回ref/reactive：const profile = computed(() => ({ ...toRaw(user), level: user.age > 18 ? 'adult' : 'minor' })) - 注意：
toRaw仅用于内部逻辑，不可直接用于模板或依赖项；真正需要响应的字段仍要通过ref或computed暴露
嵌套 reactive 对象需逐层代理，避免浅拷贝
深层结构（如数组里含对象、对象里含 reactive 子项）若被 JSON.parse(JSON.stringify())、扩展运算符或 Object.assign 处理，会丢失响应性：
立即学习“前端免费学习笔记（深入）”；
- 错误：
const list = reactive([{ id: 1, data: reactive({ x: 0 }) }]); const copy = [...list]; copy[0].data.x++ // 不触发视图更新 - 正确：
const copy = list.map(item => ({ ...item, data: item.data }))—— 但更推荐用shallowRef+ 手动追踪，或直接操作原 reactive 列表 - 深层嵌套建议统一用
reactive初始化，避免混合ref和普通对象；必要时用markRaw排除不需要响应的大型外部对象（如第三方库实例）
异步逻辑中 ref 值需用 .value 显式读写
Promise.then、setTimeout、事件回调等异步上下文里，容易忽略 ref 的包裹特性：
-
const count = ref(0); setTimeout(() => count++, 100)→ 报错，因为count是 ref，不是数字 - 应写作：
setTimeout(() => count.value++, 100) - 组合式 API 中，
computed和watch自动解包 ref，但纯 JS 运算（包括 map/filter/reduce）不会，需手动.value
