Vue 3 的 computed 缓存依赖响应式系统精确追踪，脱离追踪范围会导致结果陈旧；常见问题包括深层属性修改不触发更新、数组索引赋值无效、解构破坏响应性、异步读取不被收集、非响应式变量无法更新。
Vue 3 的 computed 缓存不是“永远有效”，它依赖响应式系统的精确追踪。一旦读取路径脱离 Vue 的依赖收集范围，缓存就无法感知变化，导致结果陈旧——这不是 bug，而是机制使然。下面几个边界条件最常被忽略，也最容易引发线上问题。
响应式对象的深层属性修改未触发更新
当你用 ref 或 reactive 包裹一个对象，并在 computed 中只读取其某个嵌套属性（如 user.profile.name），但后续仅修改该属性值（user.profile.name = 'new'），缓存可能不刷新。
- 原因：Vue 3 的 Proxy 对象默认只拦截顶层属性访问；若
profile本身不是reactive，它的内部属性变更不会被追踪 - 解决：确保所有需要响应式的嵌套结构都显式声明为响应式，例如用
reactive({ profile: reactive({ name: '' }) })，或改用ref+shallowRef配合手动更新逻辑
数组索引赋值或 length 修改
对响应式数组直接写 arr[0] = newValue 或 arr.length = 0，computed 中依赖该数组的逻辑大概率不会重算。
- 原因：Vue 3 的数组响应式主要通过拦截
push、pop、splice等方法实现；直接索引赋值和length操作无法被 Proxy 捕获为“变更” - 解决：统一使用
arr.splice(0, 1, newValue)替代索引赋值，或用arr = [...arr]强制替换引用，让依赖图重新建立
解构后使用响应式数据
在 computed 中写 const { id, name } = user，再用 id 或 name 参与计算，等于把响应式连接“剪断”了。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 原因：解构产生的是普通 JS 变量，不再携带响应式代理，Vue 无法将其纳入依赖图
- 解决：始终通过原始响应式对象访问属性，比如
user.id；若需解构，先用toRefs(user)转换，再解构得到的 ref
异步回调中读取响应式数据
在 setTimeout、Promise.then 或事件回调里访问 ref.value 并用于 computed 返回值，这个读取动作不会被首次依赖收集捕获。
- 原因：依赖收集只发生在
computedgetter 同步执行期间；异步代码运行时，收集阶段早已结束 - 解决：避免在
computed内部写异步逻辑；如需异步派生状态，应改用watch+ref手动维护，或封装为独立的异步函数供模板调用
非响应式外部变量或函数返回值
在 computed 中调用 Date.now()、Math.random()、或读取一个普通 const now = Date.now()，这些值一旦首次计算完成，后续永远不变。
- 原因：它们不属于 Vue 的响应式系统，不参与依赖图，也不触发脏检查
- 解决：如需时间敏感逻辑，可创建一个定时更新的
ref（如每秒更新的nowRef），并在computed中依赖它；或把这类逻辑移出computed，改由watch或生命周期控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
