Chrome DevTools 无法直接观测 Vue 的 computed 缓存命中率，因其缓存发生在 JS 引擎层面，无专用面板；但可通过 console.log 验证 getter 执行频次、Performance 面板观察函数调用波动、对比 methods 基线及排查响应式依赖失效原因来间接验证缓存是否生效。
看 console 输出是否去重
在 computed 的 getter 里加一句 console.log，是最简单有效的验证方式：
computed: {
expensiveList() {
console.log('[DEBUG] expensiveList getter executed');
return this.rawData.filter(...).map(...).sort(...); // 模拟高开销操作
}
}
然后在页面中多次触发渲染（比如切换 tab、v-if 切换、父组件 re-render）：
- 如果每次渲染都打印日志 → 说明没缓存，可能依赖项被意外修改（如数组 push 未用 Vue.set）、或用了非响应式数据
- 只在首次或依赖变化时打印 → 说明缓存生效
用 Performance 面板抓取 JS 执行耗时波动
虽然不能看到“命中次数”，但能观察缓存带来的性能差异：
- 打开 DevTools → Performance 面板
- 勾选 Screenshots 和 JavaScript samples
- 录制一次组件更新过程（例如点击按钮触发 this.count++）
- 停止后，在 Main 线程火焰图中查找你的 getter 函数名（如
expensiveList） - 若它只在依赖变更帧中出现，其他帧完全不出现 → 缓存有效
- 若每帧都调用且耗时稳定 → 可能被当作 methods 调用，或响应式依赖未正确追踪
对比 methods 版本做基线测试
把同一段逻辑复制一份放到 methods 里，用相同方式调用：
methods: {
expensiveListMethod() {
console.log('[DEBUG] expensiveListMethod called');
return this.rawData.filter(...).map(...).sort(...);
}
}
在模板中分别使用：
-
{{ expensiveList }}（computed，应缓存） -
{{ expensiveListMethod() }}（methods，每次重算）
刷新并观察控制台日志频次和 Performance 中函数执行频率，差异即为缓存效果的直观体现。
注意常见导致缓存失效的情况
即使写了 computed，也可能“看似没缓存”，原因通常是：
- 依赖的数据不是响应式的（比如从 localStorage 直接读、或用 Object.assign 创建新对象但未用 Vue.set）
- 对数组/对象做了非响应式修改（
arr.push()可以，但arr[0] = x不触发更新；对象新增属性未用Vue.set） - computed 内部访问了非响应式外部变量（如全局 window.config）
- 使用了 Date.now()、Math.random() 等非纯函数，或 this.$route、this.$store.state 某些深层属性未正确响应
