vue计算属性缓存仅在响应式依赖更新时生效；依赖未被正确收集（如普通对象、索引访问数组、object.freeze）会导致缓存失效或错误；非响应式值和闭包参数无法触发重算，需用watch+map或vue 3.3+工厂模式优化。
Vue 计算属性的缓存不是“永久有效”的，它只在依赖项真正响应式更新时才保持稳定。一旦依赖追踪失效或数据变更未被 Vue 捕获，缓存就会意外失效——不是“不缓存”，而是“缓存了错误的状态”或“根本没建立有效缓存”。理解重新求值的触发逻辑，关键在于搞清 Vue 是如何判定“该不该重算”的。
缓存生效的前提：依赖必须被正确收集
计算属性第一次求值时，Vue 会进入 getter 执行上下文，把其中读取的所有响应式数据（如 ref、reactive 对象的属性）自动加入依赖列表。只有这些被成功收集的依赖变化，才能触发后续重算。
- 普通对象字面量（如
{ name: 'a' }）未用reactive或ref包裹 → 不是响应式 → 无法被收集 → 缓存永不更新 - 数组直接通过索引访问（如
list[0]），但list是ref([])而非shallowRef或readonly→ 索引访问本身不会触发依赖收集 → 修改list[0]不触发重算 - 使用
Object.freeze包裹响应式对象 → Vue 无法代理其属性 → 依赖收集失败 → 缓存始终停留在初始值
重新求值的唯一条件：响应式依赖发生变更
计算属性不会因为时间推移、用户操作、或无关数据变动而重算。它只响应自己依赖列表中那些响应式数据的 set 或 trigger 操作。
-
ref.value = newValue→ 触发依赖更新 → 下次访问时重算 -
reactiveObj.key = newValue→ 触发依赖更新 → 下次访问时重算 -
arr.push(item)（arr是ref([])）→ 数组 length 变更 → 若 getter 中用了arr.length，则重算；若只用了arr[0]且未用toRefs或computed显式追踪，则可能不重算 -
Date.now()、Math.random()这类非响应式值 → 每次访问都返回新结果，但 Vue 不认为它是依赖 → 缓存永远不刷新，值却看似“变”了（实为缓存了过期结果）
闭包传参会让缓存“形同虚设”
写成 computed(() => (id) => data.find(x => x.id === id)) 这种形式，本质是返回一个函数。计算属性缓存的只是这个函数本身（即函数引用），而函数内部每次调用都会执行完整逻辑 —— Vue 完全无法追踪 id 参数是否变化，也无法缓存不同 id 对应的结果。
- 即使
data没变，连续调用getItem(1)和getItem(2)仍会重复遍历整个data - 这不是“缓存失效”，而是“根本没有缓存函数体内的计算过程”
- 真正需要参数化逻辑时，推荐用
watch+Map手动缓存，或升级到 Vue 3.3+ 的computed(fn, { deep: false })工厂模式
调试缓存行为的实用方法
不要靠猜，要用工具验证依赖是否被正确捕获：
- 打开 Vue Devtools，在 Components 面板选中组件 → 查看 Computed 标签页 → 点击具体计算属性，右侧会显示 “Dependencies” 列表，确认你预期的响应式变量是否在其中
- 在 Data 面板里手动修改某个疑似依赖项 → 观察对应计算属性是否实时更新 → 若无反应，说明该变量未被收集或不是响应式
- 在控制台打印
computed(() => {...}).effect（Vue 3 内部字段），可查看其依赖的 effect 副作用函数，进一步排查收集路径
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
