vue计算属性自动更新靠响应式系统精准建立“谁用了谁、谁变了通知谁”的映射关系，首次求值时标记活跃watcher并静默收集所有被访问的响应式字段依赖，数据变更时标记dirty并延迟至微任务重算。
Vue 计算属性的自动更新，靠的不是轮询或猜测，而是响应式系统在数据读取和写入时精准建立的“谁用了谁、谁变了通知谁”的映射关系。它不依赖你声明依赖列表，而是在 getter 执行过程中同步捕获所有被访问的响应式字段。
依赖怎么被悄悄记下来的？
计算属性首次求值时，Vue 会临时把当前计算任务标记为“活跃观察者”。此时只要读取一个响应式字段（比如 user.name 或 list[0].id），它的 getter 就会把当前这个计算任务存进自己的依赖池里。这个过程是递归且静默的：
- 嵌套属性如 profile.address.city，只要 profile 是 reactive 的，就能被完整追踪
- 数组索引访问（items[2].title）和方法调用中涉及的响应式读取（items.filter(x => x.active)）也会被纳入依赖
- 普通对象、Date.now()、Math.random()、localStorage 读取等非响应式值，不会留下任何依赖记录
数据变了，谁来动？怎么动？
当某个响应式字段被赋新值，它的 setter 会立刻遍历自己绑定的所有依赖（也就是之前收集到的那些 Watcher），并触发它们的更新流程。对计算属性来说，这并不等于马上重跑函数：
- 它只是把内部标记设为 dirty = true，表示“结果已过期”
- 真正的重新计算被推迟到下一个微任务（nextTick），与其他更新批量处理，避免重复执行
- 如果同一计算属性被模板、其他 computed 或 watch 多次引用，也只维护一个 Watcher，共享缓存与更新逻辑
为什么改了数据却没更新？常见断点在哪？
所谓“不更新”，往往是因为依赖根本没被收集上。典型情况包括：
- 在 Promise.then、setTimeout 或事件回调里才读取响应式数据——此时 getter 已结束，依赖收集早已关闭
- 用 v-if 或提前 return 跳过了某字段的访问，那个字段就不会成为依赖
- 直接操作未被 reactive 包裹的普通对象，或通过字符串 key 动态访问（如 obj[key]）但 key 本身不是响应式
- Vue 2 中对数组索引赋值（arr[0] = x）或修改 length，需用 Vue.set；Vue 3 的 Proxy 已支持大部分场景
复杂逻辑该怎么组织才稳？
一个计算属性里塞太多 if/else、多层嵌套或混合副作用，容易绕过依赖追踪，也难调试。更可靠的做法是分层拆解：
- 把基础派生字段单独抽成计算属性，例如 filteredItems、hasError、isReady
- 高层计算属性只组合这些中间结果，比如 displayText 基于 filteredItems.length 和 isReady
- 若必须动态依赖（如根据 prop.key 读取不同字段）或需要副作用（发请求、改 DOM），改用 watchEffect 更合适
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
