computed 是 vue 的惰性缓存计算属性，仅在首次访问时执行 getter 并缓存结果，依赖变化时标记 dirty，下次访问才重新计算。
Vue 的 computed 不是“一有变化就立刻重算”，而是等你真正用到它时才去判断要不要算——这就是延迟计算；它也不会每次调用都重新执行，而是记下上次结果，只要依赖没变，就直接返回旧值——这就是缓存更新策略。
延迟计算：只在访问时触发
computed 默认是 lazy（惰性）的。它内部创建的是一个 lazy effect，不会在组件初始化时立即执行 getter 函数，而是在第一次读取该计算属性的值时才运行。
- 比如
const countMsg = computed(() => `当前数量：${count.value}`)，只要没在模板或 JS 中访问countMsg.value，函数就不会执行 - 这种设计避免了无意义的预计算，尤其适合计算开销大、但不一定被使用的场景
- 即使依赖数据已变更，只要没访问，就不会重新求值，也不会标记为脏或触发更新
缓存依赖：靠 dirty 标志位控制有效性
每个 computed 实例内部维护一个 dirty 布尔值，初始为 true，表示“尚未计算”或“结果可能过期”。它的状态决定是否复用缓存。
- 首次访问：执行 getter → 缓存结果 → 设置
dirty = false - 后续访问：
dirty === false→ 直接返回缓存值 - 当任一依赖响应式数据变更时，系统会把该 computed 的
dirty设为true，但不立即重算 - 下一次访问时，发现
dirty === true，才重新执行 getter，并再次置false
依赖追踪：自动建立“谁用谁、谁变通知谁”关系
computed 的缓存能精准工作，靠的是 Vue 响应式系统的依赖收集机制。它不是靠轮询或手动声明，而是在 getter 执行过程中自动捕获所访问的响应式数据。
- 例如
computed(() => user.profile.name + user.status)，会在首次执行时把user.profile.name和user.status的响应式字段全部纳入依赖列表 - 只要其中任意一个被修改（如
user.status = 'offline'），就会触发对应 computed 的 dirty 标记 - 嵌套对象、ref、reactive、toRef 等均会被正确追踪，无需额外配置
缓存更新的实际影响：性能与行为边界
缓存不是万能的，理解它的生效条件，才能避免误用。
- 如果 computed 返回的是对象或数组，且你在外部直接修改其属性（如
myComputedObj.x = 1），这不会触发依赖更新，因为 Vue 不会监听返回值内部的变化 - 不要在 computed 中执行副作用（如发请求、改全局状态），因为它可能不被执行，或执行时机不可控
- 需要强制刷新缓存？可手动调用
triggerRef()（对 ref 类型）或重建 computed 实例，但通常说明设计上更适合用watch或方法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
