计算属性是基于惰性effect的缓存型响应式机制：首次访问时执行getter并收集依赖，后续依赖未变则返回缓存值；依赖变化时仅标记dirty，下次读取才重算并更新依赖关系，支持动态精确收集与多级响应链接。
Vue.js 的计算属性（computed）能自动响应依赖数据变化并缓存结果，其底层核心正是依赖追踪与副作用函数（effect）的联动机制。这不是简单的“监听+执行”，而是一套精细的响应式调度系统：当计算属性被访问时，它会主动“注册”自己所用到的响应式数据为依赖；当这些数据变化时，再触发对应计算逻辑的重新求值。
计算属性本质是一个带缓存的响应式 effect
Vue 中的 computed 并非独立于响应式系统之外，而是基于 effect 构建的封装。它内部会创建一个惰性（lazy）的副作用函数，并设置 dirty = true 标志。首次读取时才执行该 effect 得到值，同时收集依赖；后续读取若依赖未变，直接返回缓存值（value），跳过重新执行。
- 每个
computed实例都持有一个私有effect，该 effect 的runner就是计算函数本身 - 这个 effect 被标记为
lazy: true和computed: true，使其不立即执行，也不参与普通响应式更新队列 - 依赖的响应式属性（如
ref或reactive中的字段）在 getter 执行过程中，通过track()记录当前 activeEffect（即该 computed effect）为其依赖
依赖收集发生在 getter 执行时
当你在 computed(() => obj.count + 1) 中访问 obj.count，其 get trap 会检测到当前存在活跃的 effect（即该 computed 的 runner），于是调用 track(obj, 'count', activeEffect)，把该 effect 加入 obj.count 对应的依赖集合（depsMap）中。
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 依赖收集是“被动触发”的：只有真正读取响应式属性，才会建立连接
- 若计算属性中存在条件分支（如
v ? a : b），只有实际执行到的分支路径上的响应式读取才会被收集 - 这意味着依赖关系是动态、精确的——不会因代码存在而收集，只因运行时执行而收集
响应式更新触发 dirty 置位与懒执行
当某个被依赖的响应式属性（如 obj.count）被修改，其 set trap 会调用 trigger(obj, 'count')，遍历所有依赖该 key 的 effects 并执行它们的 scheduler（如果存在）。对于 computed effect，scheduler 的默认行为是将自身标记为 dirty = true，而不是立刻重算。
- 标记 dirty 后，下次访问该 computed 的
.value时，发现dirty === true，才调用 runner 重新执行 getter - 重新执行过程中再次进行依赖收集，可能更新依赖列表（例如上次走 if 分支，这次走 else，依赖的字段就不同了）
- 这保证了 computed 总是基于最新依赖关系求值，且避免了不必要的重复计算
effect 与 computed 的层级协作关系
一个 computed effect 可以被其他 effect（比如组件渲染函数）读取，此时它又作为“响应式数据源”参与依赖链。例如：const double = computed(() => count.value * 2)，在模板中使用 {{ double }}，渲染 effect 就会依赖 double 这个 ref-like 对象，而 double 内部又依赖 count ——形成两级响应链接。
- 上层 effect（如 render）通过
track收集的是double这个 computed ref 的依赖（即它的.valuegetter） - 下层 computed effect 在自己的
runner中收集count的依赖 - 当
count变化 → 触发 computed effect 的 dirty → 下次 render 读取double.value时重算 → render effect 拿到新值并更新视图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
