Vue响应式竟藏哪些深藏隐患，险些导致我通宵达旦？

薅羊毛。 在我最近的一个项目中，遇到了一个让我几乎通宵达旦的问题。明明数据已经更新了但视图却没有如预期般刷新，这让我一度怀疑人生。经过反复排查，才发现问题出在 Vue 的响应式机制上——它虽然强大，但也藏着不少“深坑”。

Vue 响应式原理简述

在深入问题之前，我们先简单回顾一下 Vue 的响应式原理。Vue 2.x 使用 Object.defineProperty 实现数据劫持， 说真的... 而 Vue 3 则改用 Proxy。无论是哪种方式，其核心思想都是：当被观察的数据发生变化时能够马上通知相关的视图进行更新。

响应式系统的“坑”

Vue 的响应式系统虽然强大， 但在以下场景需要特别注意：

• 数组的响应式问题在 Vue 2.x 中，push 确实是响应式的；但如果在一个异步任务中多次调用 pushVue 可能无法在一次事件循环中正确收集所有依赖。特别是在使用 ... 展开运算符时Vue 可能会“错过”部分变更。
• 对象的动态属性添加直接给对象添加新属性不会触发更新，必须使用 this.$set 方法。

案例分析：异步加载数据

在我的项目中， 有一个需求是通过接口动态加载数据，并将数据追加到一个数组中。