VueJS为何能检测到数组中对象新增的属性？

这个问题其实得从 Vue 2 的响应式原理说起，咱们一步步拆解哈～

首先得明确：Vue 2 的响应式核心是通过 Object.defineProperty 给对象的已存在属性添加 getter/setter 监听。也就是说，组件初始化时，只有那些已经在 data 里声明过的属性，才会被纳入响应式系统。

回到你的场景：你的两个组件里，items 数组的第二个对象初始化时没有 show 属性，所以 Vue 不会给这个对象的 show 属性添加响应式监听。

为什么第一次直接赋值没检测到变化？ #

当你直接写 items[1].show = true 时，相当于给这个对象新增了一个属性，但这个属性并没有被 Vue 做响应式处理——没有 getter/setter，所以赋值操作不会触发响应式更新，模板自然不会变化，这完全符合 Vue 2 的响应式规则，是预期内的行为。

那后续为什么又检测到了新增属性？ #

这大概率是你后续的操作触发了两种情况之一：

1. 使用了 Vue 提供的响应式添加属性方法 #

如果你是通过 Vue.set 或者组件实例的 this.$set 来添加属性的，比如：

this.$set(this.items[1], 'show', true)

Vue 会手动给这个新增的 show 属性添加上 getter/setter，把它纳入响应式系统。这时候赋值就会触发响应式更新，模板也就检测到变化了。

2. 触发了其他响应式更新导致组件重新渲染 #

比如你之后修改了第一个对象的 show 属性（比如把它改成 false），因为第一个对象的 show 是响应式的，修改它会触发组件重新渲染。在重新渲染时，Vue 会重新读取 items[1].show 的值——这时候它已经被你赋值为 true 了，所以模板会显示这个对象。看起来像是“检测到了新增属性”，但本质是组件重新渲染时读取了最新的属性值，并不是这个属性本身变成了响应式的。

另外补充一句：如果是 Vue 3 的场景，因为用了 Proxy 实现响应式，不管是新增还是修改属性，都能直接被检测到，不会有这个问题～

内容的提问来源于stack exchange，提问作者thanksd