Vue 3 的 watch 默认监听不到数组长度变化，因 length 属性非可写且无独立响应性；正确方式有三：① watch(arr, cb, {deep: true})；② watch(() => arr.length, cb)；③封装操作并更新辅助 ref。
Vue 3 的 watch 默认监听不到数组长度变化（比如 arr.push()、arr.pop()、arr.length = 0），不是 bug，而是响应式设计的必然结果——因为数组长度变化本身不触发属性的 set 操作，而 Vue 3 的响应式系统基于 Proxy，只拦截对象属性读写和数组索引赋值（如 arr[0] = x）、以及已知的变异方法（push/pop 等）。
为什么 watch 不直接响应 length 变化？
Vue 3 中，响应式数组的 length 属性是 非可配置、非可写 的（Proxy handler 中未对其做 set 拦截）。当你执行 arr.push(x)，Vue 确实能捕获并触发更新，但触发的是整个数组的依赖更新（通知所有监听该数组的 effect），而不是单独“length 属性变了”。watch 若监听的是 arr.length 这个表达式，它内部会尝试读取 arr.length 并收集依赖——但 length 是一个 getter，其返回值本身没有独立响应性，且它的变化不会主动通知依赖。
换句话说：length 不是一个响应式“数据源”，它只是数组状态的一个派生值。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
正确监听数组内容或长度变化的 3 种方式
-
监听整个数组（推荐）：使用
watch(arr, callback, { deep: true })。虽然开销略大，但能捕获任意元素增删、索引修改、length 变更等所有变更。Vue 3 内部会对响应式数组做特殊优化，deep watch 实际效率比监听普通对象高得多。 -
监听数组引用 + 显式检查 length：用
watch(() => arr.length, callback)。这利用了计算属性式的 getter 监听，每次数组变更后重新执行arr.length读取，只要值不同就会触发回调。注意：必须确保arr是响应式数组（ref 或 reactive 包裹），否则读取无依赖收集。 -
封装安全的 push/pop 方法（适合业务逻辑强管控场景）：在组合函数中统一管理数组操作，每次调用都显式触发自定义事件或更新一个辅助 ref（如
countRef.value = arr.length），再 watch 这个 ref。适合需要精确控制响应时机或埋点统计的场景。
避坑重点：别踩这些常见错误
-
不要直接监听
arr.length字面量：如watch(arr.length, ...)—— 这监听的是初始 length 值，后续变化完全不会触发。 -
避免用非变异方法重置数组：比如
arr = []（破坏响应式引用）或arr.length = 0（不触发响应）。应改用arr.splice(0)或arr.length = 0配合triggerRef（仅限 shallowRef 场景）。 - watchEffect 中读取 length 是安全的，但别误以为它“监听 length”：它监听的是整个数组的响应式依赖，length 只是触发时顺带读取的值。
补充：reactive 数组 vs ref 包裹数组的区别
用 reactive([1,2,3]) 和 ref([1,2,3]) 创建的数组，在 watch 行为上表现一致——关键在于你监听的是什么。但要注意：ref(arr) 后，watch arrRef 监听的是 ref 对象本身；若想监听数组内容，必须写 watch(arrRef, ...) 或 watch(() => arrRef.value, ..., { deep: true })。而 reactive(arr) 直接监听 arr 即可。
立即学习“前端免费学习笔记（深入）”；
简单记：响应式靠 proxy 拦截操作，watch 靠依赖追踪读取，length 本身不参与追踪链。
