深度揭秘：为什么 Vue 2 无法监听数组下标和对象新增属性？

🕵️‍♂️ 深度揭秘：为什么 Vue 2 无法监听数组下标和对象新增属性？

🤔 现象回顾：那些让人头秃的 Bug

在 Vue 2 开发中，你一定遇到过以下场景：

❌ 场景 1：直接通过索引修改数组

data(){return{list:['a','b','c']}},methods:{updateItem(){this.list[0]='x';// ❌ 视图不会更新！console.log(this.list);// ['x', 'b', 'c'] (数据变了，但界面没变)}}

❌ 场景 2：直接添加新属性

data(){return{user:{name:'Alice'}}},methods:{addAge(){this.user.age=25;// ❌ 视图不会更新！console.log(this.user);// { name: 'Alice', age: 25 } (数据变了，但界面没变)}}

疑问：既然 JavaScript 对象和数组都是引用类型，为什么 Vue 能监听到push或普通属性的修改，却对“下标赋值”和“新增属性”视而不见？

答案藏在 Vue 2 的核心实现——Object.defineProperty中。

📂 目录

1. 🧠 核心原理：Object.defineProperty 的工作方式
2. 🚫 痛点一：为什么不能监听对象属性的新增/删除？
3. 🚫 痛点二：为什么不能监听数组下标的变化？
4. 🛠️ 解决方案：Vue 2 是如何“打补丁”的？
5. 🚀 对比 Vue 3：Proxy 如何完美解决？
6. 💡 总结

1. 🧠 核心原理：Object.defineProperty 的工作方式

Vue 2 在初始化时，会遍历data中的所有属性，并使用Object.defineProperty为它们定义getter和setter。

// 简化版 Vue 2 响应式初始化functiondefineReactive(obj,key,val){Object.defineProperty(obj,key,{enumerable:true,configurable:true,get(){console.log(`读取了${key}`);// 收集依赖（Dep）returnval;},set(newVal){if(newVal===val)return;val=newVal;console.log(`设置了${key}为${newVal}`);// 通知更新（Notify）},});}

关键点：Object.defineProperty是针对特定属性进行劫持的。它只能监听已经存在于对象上的属性。

2. 🚫 痛点一：为什么不能监听对象属性的新增/删除？

🔍 原因分析

当你执行this.user.age = 25时：

1. user对象在初始化时只有name属性。
2. Vue 只为name定义了getter/setter。
3. age是一个全新的属性，它身上没有任何getter/setter。
4. JavaScript 引擎直接将该属性添加到对象上，完全绕过了 Vue 的拦截机制。
5. Vue 根本不知道age被添加了，因此不会触发视图更新。

同理，delete this.user.name只是删除了属性，也不会触发任何通知。

比喻：
Vue 2 像一个保安，只认识门口登记过的住户（已定义的属性）。
如果一个陌生人（新属性）直接翻墙进来（直接赋值），保安根本看不见，也不会通知业主（视图）。

✅ 解决方案：Vue.set/this.$set

Vue 提供了 API 来手动触发响应式：

// 语法：Vue.set(target, propertyName/index, value)this.$set(this.user,"age",25);

内部原理：

1. 判断目标是否是响应式对象。
2. 如果是新属性，调用Object.defineProperty为该属性添加getter/setter。
3. 手动触发依赖通知。

3. 🚫 痛点二：为什么不能监听数组下标的变化？

🔍 原因分析

当你执行this.list[0] = 'x'时：

1. 数组在初始化时，Vue 会遍历其元素。如果元素是对象，会递归劫持；如果是基本类型，数组本身并没有为每个索引（0, 1, 2…）定义getter/setter。
2. 性能考量：如果为数组的每一个索引都定义getter/setter，当数组长度为 10,000 时，内存开销巨大，且初始化极慢。
3. 语言限制：Object.defineProperty虽然可以监听索引，但 Vue 2 出于性能考虑，没有对数组索引进行劫持。
4. 因此，直接通过索引赋值list[0] = 'x'只是一个普通的 JavaScript 赋值操作，不会触发setter。

注意：你可能听说过“Vue 重写了数组方法”。是的，Vue 重写了push,pop,shift,unshift,splice,sort,reverse这 7 个方法。

• 这些方法会改变数组长度或内容，Vue 在这些方法内部手动触发了通知。
• 但是，list[0] = 'x'不是方法调用，而是属性赋值，所以无法被拦截。

✅ 解决方案

1. 使用变异方法：

   this.list.splice(0,1,"x");// ✅ 触发更新

2. 使用Vue.set：

   this.$set(this.list,0,"x");// ✅ 触发更新

3. 替换整个数组：

   this.list=[...this.list];// 或者使用 slice, concat 返回新数组// 赋值给 this.list 会触发 list 属性的 setter，从而更新视图

4. 🛠️ 解决方案：Vue 2 是如何“打补丁”的？

为了弥补Object.defineProperty的缺陷，Vue 2 做了两件事：

1. 重写数组原型方法

Vue 拦截了数组的 7 个变异方法，在执行原生方法后，手动调用ob.dep.notify()通知更新。

// 伪代码constarrayProto=Array.prototype;constmethodsToPatch=["push","pop","shift","unshift","splice","sort","reverse",];methodsToPatch.forEach((method)=>{constoriginal=arrayProto[method];def(arrayMethods,method,functionmutator(...args){constresult=original.apply(this,args);constob=this.__ob__;ob.dep.notify();// 手动通知returnresult;});});

2. 提供$set和$deleteAPI

允许开发者手动将新属性转化为响应式，或删除响应式属性并通知更新。

5. 🚀 对比 Vue 3：Proxy 如何完美解决？

Vue 3 使用Proxy替代了Object.defineProperty，彻底解决了上述问题。

✅ Proxy 的优势

1. 拦截整个对象：Proxy代理的是整个对象，而不是单个属性。
2. 拦截所有操作：包括属性的读取、赋值、删除、甚至in操作符。
3. 天然支持数组索引：对数组索引的赋值会被set陷阱捕获。
4. 天然支持新增属性：对新属性的赋值也会被set陷阱捕获。

// Vue 3 简化原理constdata=newProxy({},{get(target,key){track(target,key);// 收集依赖returnReflect.get(target,key);},set(target,key,value){constresult=Reflect.set(target,key,value);trigger(target,key);// 触发更新returnresult;},deleteProperty(target,key){constresult=Reflect.deleteProperty(target,key);trigger(target,key);// 触发更新returnresult;},},);// ✅ 以下操作都能被拦截并触发更新data.list[0]="x";data.user.age=25;deletedata.user.name;

结论：Vue 3 不再需要$set，也不再需要担心数组下标的问题。代码更符合 JavaScript 原生直觉。

6. 💡 总结

🚀 博主寄语：
理解 Vue 2 的局限性，不仅能帮你避免 Bug，更能让你深刻体会技术演进的必要性。
Object.defineProperty是时代的产物，而Proxy则是现代化的利器。

记住口诀：
Vue 2 劫持靠定义，
新增下标难留意。
若要更新需 Set，
变异方法也可以。

Vue 3 代理更强大，
任意操作全拦截。
代码直观无死角，
响应系统真厉害。

希望这篇文档能帮你彻底搞懂 Vue 2 响应式的底层原理！如果有疑问，欢迎在评论区留言。👇

喜欢这篇文章吗？记得点赞、收藏、转发哦！❤️