Vue响应式原理疑问：为何直接改数组/新增对象属性视图仍更新？
嘿，这个问题挺典型的，刚好能帮你理清Vue不同版本响应式机制的核心差异～你遇到的“不符合以往认知”的现象，本质上是因为你当前使用的是Vue 3，而非传统认知里的Vue 2，两者的响应式实现逻辑有本质区别。
一、为什么你的obj.text2新增后视图会更新？
在Vue 3中，响应式系统是基于Proxy代理实现的，这和Vue 2用Object.defineProperty的方式完全不同。Proxy可以拦截对象的全量操作，包括新增属性、删除属性、数组索引修改这些Object.defineProperty无法直接监听的行为。
具体到你的代码：
- 当你执行
this.obj.text2 = 'text2'时，Proxy的set陷阱会立刻捕获到这个属性新增的操作，自动通知依赖更新，所以绑定了obj.text2的<div>（包括用v-show控制的那个）都会同步更新视图。 - 同样，数组的
this.arr[3] = 0操作，Proxy也能拦截到数组索引的赋值行为，对应的视图自然也会更新——这在Vue 2里是做不到的，Vue 2中必须用Vue.set或者数组变异方法（比如splice）才能触发更新。
二、深入拆解属性新增的响应式检测机制
Vue 2的局限与解决方案
在Vue 2中，响应式是通过Object.defineProperty给每个已有属性添加getter/setter来实现的，但它天生有个缺陷：只能检测已有属性的修改，无法感知新属性的添加。
比如你在Vue 2里执行this.obj.text2 = 'text2'，因为text2不是初始化时data中定义的属性，Vue没有给它绑定getter/setter，所以修改它不会触发视图更新。这时候必须用官方提供的API手动处理：
// Vue 2中新增响应式属性的正确方式 this.$set(this.obj, 'text2', 'text2') // 或者全局写法 Vue.set(this.obj, 'text2', 'text2')
这些API会手动给新增属性添加响应式绑定，同时主动触发依赖更新。
Vue 3的Proxy实现优势
Vue 3改用Proxy包裹整个响应式对象，它能拦截对象的所有属性操作，包括但不限于：
- 属性新增：
obj.newKey = value - 属性删除：
delete obj.key - 数组索引赋值：
arr[index] = value - 数组长度修改：
arr.length = newLength
只要你对响应式对象做上述操作，Proxy的拦截逻辑就会自动触发，通知相关依赖更新视图，完全不需要再手动调用$set。
另外还有个贴心细节：如果你的响应式对象是深层嵌套的，Vue 3在访问内层对象时，会自动把内层对象也转换成Proxy代理，所以深层属性的新增同样能被精准检测到。
三、特殊情况排查（如果是Vue 2环境）
如果你确实是在Vue 2中测试却出现了视图更新，那可能是以下两种特殊场景：
- 你在修改新增属性后，又修改了其他已有的响应式属性（比如
this.obj.text = 2），导致组件重新渲染，顺带渲染了新增的text2； - 你的组件使用了
Vue.observable或者第三方状态管理库，它们的响应式处理逻辑和原生Vue 2有差异。
但从你描述的“所有视图均完成更新”来看，大概率是Vue 3环境，这完全符合Proxy响应式的特性。
内容的提问来源于stack exchange，提问作者Cele King
