vue计算属性通过响应式系统自动完成依赖收集与派发更新：读取时记录依赖，修改时精准通知重算；getter执行时收集真实访问的响应式字段，set触发时标记dirty并惰性更新，结果缓存且仅在依赖变化时重新求值。
Vue 计算属性的依赖收集与派发更新，不是靠定时检查或手动触发，而是依托整个响应式系统自动完成：读取时记下谁在用，修改时精准通知谁重算。
计算属性的 getter 触发依赖收集
当组件首次渲染或 computed 第一次被访问时，其 getter 函数会同步执行。此时 Vue 正处于依赖收集状态（activeEffect 存在），只要 getter 内部读取了响应式字段（如 this.a 或 this.list[0].name），就会触发该字段的 get 拦截（Vue 3）或 getter（Vue 2），进而调用 track() 把当前计算属性对应的 effect 记录到该字段的依赖集合中。
关键点：
- 只收集真实读取的字段，没用到的不会进依赖列表
- 嵌套对象、数组索引、响应式 Map/Set 的访问都会被 track 到（Vue 3 支持完整拦截）
- 异步代码（setTimeout、Promise.then）里读取的数据不参与收集
数据变更时触发派发更新
当某个被依赖的响应式属性被赋值（例如 this.a = 'new'），其 set 拦截器会立即运行 trigger()，查找该属性对应的所有 effect，并将它们标记为“待更新”。
对计算属性而言，这个 effect 是一个 lazy watcher（Vue 2）或带 lazy: true 的 ReactiveEffect（Vue 3）。它不会立刻执行 getter，而是：
- 把自身 dirty 标志设为 true
- 等待下一个微任务（nextTick 或 queueJob）统一调度
- 批量、惰性地重新求值，避免重复计算
缓存机制让多次访问不重复执行
计算属性的结果会被缓存，后续访问直接返回 value，不再进入 getter，除非依赖已变（dirty === true）。
这和 methods 有本质区别：
- methods 是普通函数，每次调用都执行，不走响应式调度，也不缓存
- computed 被包装为响应式引用，自带依赖追踪、脏检查、结果缓存三件套
- 即使多个地方使用同一个 computed，也只维护一份依赖关系和一个缓存值
依赖变化后如何确保视图更新
计算属性本身不直接操作 DOM。它的更新会间接驱动视图：
- 如果该 computed 被模板使用（如 {{ fullName }}），模板的渲染 effect 会依赖这个 computed 的返回值
- 当 computed 重新求值后，其 effect 会通知上层渲染 effect，触发 patch 和 DOM 更新
- 若 computed 被其他 computed 或 watch 使用，也会触发对应 effect 的更新链
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
