Vue响应式失效的根本原因是响应式连接断裂：操作了副本而非原始代理对象。正确做法包括不直接赋值reactive变量、用toRefs解构、异步数据用Object.assign合并、嵌套属性直接修改原对象属性。
Vue 响应式数据“变了但视图不更新”，根本不是数据没变，而是 Vue 没收到通知——响应式连接断了。关键在于：你操作的已不再是那个被 Proxy 或 RefImpl 包裹的响应式对象，而是它的副本、解构值、新赋值对象，或绕过了追踪路径。
别直接给 reactive 变量重新赋值
reactive() 返回的是一个代理对象，Vue 靠这个引用持续追踪变化。一旦用 = 把它替换成另一个对象，引用就断了，响应式能力随之消失。
- ❌ 错误写法：const user = reactive({ name: '' }); setTimeout(() => { user = { name: '李四' }; }, 1000); —— 这行赋值让
user指向普通对象，不再受 Proxy 控制 - ✅ 正确做法：只改属性，不换引用 ——
user.name = '李四';或批量更新用Object.assign(user, { name: '李四', age: 25 })
解构后变量不响应？用 toRefs 包一层
直接 const { name } = state 是值拷贝，拿到的是原始值，和响应式系统彻底脱钩。Vue 无法监听这个局部变量的变化。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- ❌ 错误写法：const state = reactive({ name: '张三' }); const { name } = state; name = '王五'; —— 视图完全不动
- ✅ 正确做法：
const { name } = toRefs(state); name.value = '王五';——name是 ref，修改.value才触发更新 - ? 补充：模板中可直接写
{{ name }}，Vue 自动解包，无需.value
异步请求回来的数据，别整体覆盖
从 API 拿到 response.data 后写 data = response.data，本质和第一种情况一样：替换了引用。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐方式一（首选）：
Object.assign(data, response.data)—— 合并进原响应式对象，保持引用不变 - ✅ 推荐方式二：字段明确时逐个赋值 ——
data.id = res.id; data.title = res.title; - ✅ 推荐方式三：必须整体替换且结构复杂？改用
ref包装：const data = ref(null); data.value = response.data;—— 替换.value不影响响应性
嵌套对象深层修改没反应？确认仍是 reactive 对象
从 reactive 对象里取出子对象（比如 state.profile），再对它单独调用 reactive() 或 ref()，反而可能破坏原有响应链。
- ⚠️ 注意：只要源头是
reactive，其所有嵌套层级默认就是响应式的，无需额外处理 - ❌ 危险操作：
const profile = reactive(state.profile); profile.nick = 'new';——profile已脱离原始代理，修改不会同步回state - ✅ 安全做法：直接改
state.profile.nick = 'new';
