Vue 3 的 watch 默认不响应数组项增删，需通过监听 ref 数组并启用 deep: true、监听 reactive 数组的 getter 函数、监听 length 属性或使用 watchEffect 实现。
Vue 3 的 watch 默认**不会自动响应数组项的增删**（如 push、pop、splice），因为这些操作不改变数组的引用，而 Vue 的响应式系统对数组的追踪是基于方法拦截 + 索引/长度变化的——但 watch 默认只在源值“被重新赋值”或“深层属性变更被显式捕获”时触发。要监听数组项增删并执行回调，关键在于：**正确选择监听源 + 启用 deep: true，或改用更合适的模式**。
监听 ref 数组（推荐基础方式）
如果你用 ref 定义数组，直接监听该 ref，并开启深度监听：
- ✅ 正确写法：监听
ref本身，配合{ deep: true } - ⚠️ 注意：
deep: true是必须的，否则增删元素不会触发回调（仅数组重新赋值才触发）
示例：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
import { ref, watch } from 'vue'
<p>const list = ref([1, 2])</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>watch(list, (newList, oldList) => {
console.log('数组变化了', newList.length, '←→', oldList?.length)
}, { deep: true }) // 必须加 deep！</p><p>// 触发回调
list.value.push(3) // ✅ 触发：新长度3，旧长度2
list.value.pop() // ✅ 触发：新长度2，旧长度3
监听 reactive 数组（需函数包裹）
若用 reactive 声明数组，不能直接传 arr 给 watch（会警告且不生效），必须用 getter 函数返回数组，并启用 deep：
- ✅ 正确：监听
() => arr，并设{ deep: true } - ❌ 错误：
watch(arr, ...)—— 不会响应内部变化
示例：
import { reactive, watch } from 'vue'
<p>const arr = reactive([1, 2])</p><p>watch(() => arr, (newArr, oldArr) => {
console.log('reactive 数组变了', newArr.length)
}, { deep: true })</p><p>arr.push(3) // ✅ 触发
监听数组长度变化（轻量精准方案）
如果只关心“有没有增删项”，不关心具体内容，监听 .length 更高效、无冗余：
- ✅ 避免深度遍历开销，适合大数组
- ✅ 只在 push/pop/shift/unshift/splice 等真正改变长度的操作时触发
示例：
const list = ref([1, 2])
<p>watch(() => list.value.length, (newLen, oldLen) => {
if (newLen > oldLen) console.log(<code>新增 ${newLen - oldLen} 项</code>)
else console.log(<code>删除 ${oldLen - newLen} 项</code>)
})
防抖 + 异步场景建议用 watchEffect
当监听数组变化后需发请求、更新 UI 或做防抖处理时，watchEffect 更自然：
- ✅ 自动追踪
list.value所有依赖（含 length、元素值等） - ✅ 无需手动写
deep，逻辑更简洁 - ✅ 方便结合
onInvalidate做防抖清理
示例（带防抖）：
import { ref, watchEffect } from 'vue'
<p>const list = ref([])
let timer</p><p>watchEffect((onInvalidate) => {
onInvalidate(() => clearTimeout(timer))
timer = setTimeout(() => {
console.log('列表稳定了，当前项数：', list.value.length)
}, 300)
})
不复杂但容易忽略：数组增删监听的核心不是“怎么写语法”，而是理解 Vue 响应式对数组的限制——它靠重写变异方法实现响应，而 watch 默认不主动探测索引级变化，所以必须靠 deep 或聚焦可观察属性（如 length）来破局。
