在 vue 中，数组不能像对象一样被 proxy 或 object.defineproperty 捕获的原因在于数组的下标赋值和 length 属性修改无法触发响应式更新机制。1.vue 2 使用 object.defineproperty，vue 3 使用 proxy，但二者都无法追踪数组下标访问或长度变更；2.为解决此问题，vue 对数组方法进行劫持，重写 push、pop、shift、unshift、splice、sort、reverse 等方法以触发更新；3.开发中应避免使用 arr[index] = newvalue 或 arr.length = newlength 等方式修改数组，而应使用 splice 或重新赋值 map/filter 等返回新数组的方法。这些限制要求开发者采用特定方式操作数组，以确保视图同步更新。
在 Vue 中，响应式数据对数组的处理确实有些特殊。简单来说，这是因为 JavaScript 的数组对象本身不具备自动触发更新的能力，而 Vue 为了实现数组变化时视图也能同步更新，不得不通过一些“绕道”的方式来实现。
Vue 并不能自动追踪数组下标的变化或修改数组长度的操作（比如 arr[0] = newValue 或 arr.length = newLength），所以它只能另辟蹊径，通过重写数组的一些方法来实现响应式更新。
数组为什么不能像对象一样被 Proxy/Object.defineProperty 捕获？
我们知道，Vue 2 使用的是 Object.defineProperty，Vue 3 使用了 Proxy 来监听对象属性的变化。但无论是哪种方式，它们都很难直接监听数组下标访问或长度变更这种操作。
立即学习“前端免费学习笔记（深入）”；
举个例子：
let arr = [1, 2, 3]; arr[0] = 4;
这段代码在 JS 中是合法的，但如果你用 Object.defineProperty 或 Proxy 去监听这个数组，你会发现：
- 下标赋值不会触发
set； - 修改
.length属性也不会触发更新； - 所以 Vue 就无法知道数组变了，自然也就不会更新视图。
这就导致了一个问题：Vue 无法自动追踪数组的某些变更方式。
Vue 是如何解决这个问题的？
为了解决这个问题，Vue 对数组做了一些“魔改”：
在 Vue 2 中：
Vue 会把目标数组的原型替换掉，使用一个自定义的“拦截器”原型，其中重写了如下常用方法：
PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We
pushpopshiftunshiftsplicesortreverse
这些方法都会改变数组内容，所以 Vue 把它们包装了一下，在调用原始方法的同时通知依赖更新。
在 Vue 3 中：
虽然 Vue 3 使用了更强大的 Proxy，可以更好地追踪对象属性的变化，但数组的下标赋值、修改 length 等行为仍然无法自动追踪。因此 Vue 3 依然沿用了类似 Vue 2 的思路，对这些特定数组方法进行了劫持。
也就是说，即使在 Vue 3 中，你也不能通过下标赋值或者修改 length 来触发响应式更新。
开发中需要注意什么？
如果你在开发过程中遇到了数组变更但视图没更新的情况，大概率是因为你用了不被 Vue 拦截的方式去修改数组。常见的几种情况包括：
- ❌
arr[index] = newValue - ❌
arr.length = newLength - ✅ 推荐使用
arr.splice(index, 1, newValue)替代第一种
还有一些时候我们会用数组的 map/filter/reduce 这些返回新数组的方法，这时候记得要重新赋值：
// 不会触发更新 this.arr.map(item => item * 2); // 正确做法 this.arr = this.arr.map(item => item * 2);
因为 map 本身不会改变原数组，只有重新赋值才会触发 Vue 的响应式机制。
总结一下
Vue 对数组的响应式处理之所以特殊，主要是因为 JS 原生数组的行为限制了自动追踪能力。Vue 不得不采用“劫持数组方法”的方式来实现更新通知。这要求我们在开发中注意使用合适的方法修改数组，避免踩坑。
基本上就这些。
