在 computed 的 getter 中添加 console.log 是观察缓存行为最直接有效的方式：首次访问或依赖变化时日志触发并执行计算，后续重复访问且依赖未变则无日志、直接返回缓存值；需避免将日志写在依赖外或引入非响应式副作用，以免干扰判断；配合 Vue Devtools 的 Computed 状态图标及与 methods 对比，可交叉验证缓存是否生效。
在 computed 中加日志是观察缓存行为最直接的方式——每次 console.log 打印，就代表一次真实计算；没打印却拿到值，说明命中了缓存。
在 getter 里插入 console.log
这是最基础也最有效的调试手段。把日志放在 getter 函数体开头，就能清晰看到：什么时候执行、什么时候跳过。
- 首次访问或依赖变化后首次读取 → 日志出现，函数执行
- 后续重复访问且依赖未变 → 日志不出现，直接返回缓存值
- 模板中多次使用同一 computed → 只有第一次可能触发日志（若依赖未变）
避免日志干扰缓存判断的陷阱
日志本身不会破坏缓存，但以下写法会让日志“失真”，误判缓存是否生效：
- 把 console.log 写在依赖之外（比如函数外层或条件分支末尾），它可能每次都执行，和 computed 逻辑脱钩
- 在 getter 中调用非响应式副作用（如 Date.now()），导致值看似变了，但 Vue 没追踪到依赖，缓存不更新，日志也不再触发
- 依赖了未被响应式包裹的对象属性（如解构 props 后直接用 name 而非 toRefs），Vue 无法收集依赖，日志只打一次，后续永远不触发
配合 Vue Devtools 验证
单独看日志还不够，建议同步打开 Vue Devtools 的 Components 面板：
- 找到对应组件，在 Computed 标签下查看该属性状态
- 带灰色图标的表示当前为“clean”（缓存有效）；带橙色感叹号的表示“dirty”（待重新计算）
- 修改 data 或 ref，观察图标变化 + 控制台日志是否同步触发，能交叉验证依赖追踪是否正常
用简单对比快速确认缓存效果
写两个相同逻辑的实现，一个用 computed，一个用 methods，模板中并排调用：
- {{ fullName }}（computed）→ 控制台只打印一次
- {{ getFullName() }}（methods）→ 每次渲染都打印，哪怕数据没变
- 这个对比能直观暴露“缓存是否存在”，比单看日志更有说服力
