319 字
1 分钟
深坑记录：响应式丢失的那一夜
那个让我通宵的 Bug
那是周五的晚上，本该是快乐的周末开始。但是测试报了一个致命 Bug：用户点完保存，列表数据没有更新，必须刷新页面才行。
排查过程
- 查接口：后端接口返回的数据是新的，没问题。
- 查 Vue DevTools：发现 store 里的数据确实可以更新，但是组件里的数据没变。
- 定位代码：
state: () => ({ list: [] })
// component.vueconst { list } = userStore就是这行解构！在 Options API 里习惯了 this.list，在 Setup 里直接解构 store，导致 list 变成了一个普通的数组，失去了响应性连接。
心态崩了
毁灭吧，赶紧的。累了。
修复方式是保留 userStore.list 的直接访问，或者使用 storeToRefs(userStore) 再解构。真正费时间的不是这行代码，而是接口、Store 和组件三边看起来都“有数据”，只有响应式连接悄悄断了。
为什么这么难？
前端不就是画画界面调调接口吗？为什么要搞这么复杂？Webpack 还没整明白，Vite 又来了；Vue 2 刚熟练，Vue 3 又变了。学不动了，真的学不动了。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
深坑记录：响应式丢失的那一夜
https://blog.luozili.work/posts/vue-learning-12/ 部分信息可能已经过时
相关文章 智能推荐
1
Ref vs Reactive：响应式的哲学思考 (头秃篇)
Vue学习之路 对比 Vue 3 中 ref 与 reactive 的使用边界，以及解构、替换对象和模板自动解包时容易踩到的坑。
2
Composition API：逻辑复用的快乐与痛苦
Vue学习之路 记录用 Composable 提取 Vue 3 业务逻辑时的收益、边界，以及逻辑复用过度后出现的新复杂度。
3
生命周期钩子：生老病死，Vue 组件的一生
Vue学习之路 按创建、挂载、更新和卸载阶段梳理 Vue 3 组件生命周期，以及各类钩子的典型使用场景。
4
Vue 3 启航
Vue学习之路 从 jQuery 时代的回忆出发，记录第一次系统学习 Vue 3、Vite 与组合式 API 的过程。
5
组件通信：Props 传值传到手抽筋
Vue学习之路 对比 Props/Emit、v-model、Provide/Inject 与全局状态等组件通信方式，避免把简单关系写成事件迷宫。