Vue为什么watch监听不到数组变化？数组响应式正确用法

Vue 2 中 watch 默认无法监听数组的索引直接赋值（如 arr[0] = newValue）和 length 修改，根源在于其基于 Object.defineProperty 的响应式系统存在拦截盲区；只有 push、pop、shift、unshift、splice、sort、reverse 这7个被重写的数组方法才能触发响应更新，而索引赋值、length 变更及直接替换数组引用等操作则需配合 deep: true、$set 或计算属性等方案才能可靠监听——Vue 3 借助 Proxy 已从根本上解决该问题，但深度嵌套变化仍需显式配置 deep: true，掌握这些差异与技巧，才能写出高效、健壮的数组响应式逻辑。

Vue 2 中 watch 默认监听不到数组**通过索引直接赋值**（如 arr[0] = newValue）或**修改数组长度**（如 arr.length = 0）的变化，根本原因在于 Vue 2 的响应式系统基于 Object.defineProperty，而该 API 无法拦截这两种操作。

哪些数组操作是响应式的？

Vue 2 重写了数组的 7 个变更方法，调用它们会触发视图更新和 watch 回调：

• push()、pop()
• shift()、unshift()
• splice()、sort()、reverse()

✅ 正确示例：
this.list.push(item) 或 this.list.splice(1, 1, newItem) —— watch 能捕获。

哪些数组操作是非响应式的？

以下写法不会触发响应式更新，watch 也监听不到：

• this.list[0] = 'new'（索引直接赋值）
• this.list.length = 0（清空长度）
• this.list = [...this.list, item]（替换整个引用，但 watch 需配置 deep: true 才能捕获内容变化）

⚠️ 注意：即使替换了数组引用，如果 watch 没开启深度监听，也可能错过内部元素变化。

watch 数组的正确写法

要可靠监听数组内容变化，推荐组合使用以下方式：

• 监听数组引用 + deep: true：
  watch: { list: { handler() { /* … */ }, deep: true } }
  这样能捕获所有深层变化（包括 push/splice 后的内容变动），但性能略低，适合小数组。
• 用计算属性做中间层：
  将依赖数组逻辑提取到 computed，再 watch 计算属性。例如：
  computed: { listCount() { return this.list.length } }，然后监听 listCount。
• 主动触发更新（兼容非响应式操作）：
  若必须用 this.list[0] = x，随后调用 this.$set(this.list, 0, x) 或 this.$forceUpdate()（不推荐后者）。

Vue 3 的改进

Vue 3 使用 Proxy 代理整个数组对象，天然支持索引赋值、length 修改等所有操作，watch 默认即可监听。但注意：
watch 默认是浅监听，仍需 deep: true 才能响应嵌套对象内部变化；
若只关心数组长度或是否为空，监听 list.length 或用计算属性更高效。

今天关于《Vue为什么watch监听不到数组变化？数组响应式正确用法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！