vue计算属性自动追踪getter中读取的所有响应式依赖，支持跨对象、嵌套访问及链式派生；需避免异步、条件分支遗漏和解构导致的响应丢失，并用devtools验证依赖完整性。
Vue 计算属性天生支持多重依赖监听，不需要额外配置——只要在 getter 函数里读取多个响应式变量，Vue 就会自动追踪全部依赖，并在任一依赖变化时触发重新计算。
依赖自动收集：写什么就监听什么
计算属性的 getter 是一个同步执行的函数，Vue 在首次求值时会通过 Proxy（Vue 3）或 Object.defineProperty（Vue 2）拦截所有响应式数据的读取操作，把访问过的路径都记为依赖。
- 比如
computed(() => user.name + user.age + settings.theme)，会同时监听user.name、user.age和settings.theme - 即使依赖来自不同对象（如
form.data和store.config），只要它们是ref、reactive或computed，都能被正确捕获 - 嵌套访问如
list[0]?.profile?.city同样生效，Proxy 能逐层代理数组和对象访问
链式 computed 也能串联依赖
一个计算属性可以依赖另一个计算属性，形成派生链，只要最上游有真实响应式源，整条链就具备响应性。
- 例如：
base → filtered → sorted，修改base中任意字段，sorted也会更新 - 注意避免“纯 computed 套娃”：如果所有环节都是
computed但没有连接到ref或reactive，更新将无法触发 - Pinia 中务必用
store.xxx形式访问，不要解构（如const { count } = store），否则会断开响应连接
避免依赖丢失的常见陷阱
多重依赖看似简单，但在条件分支、异步或动态结构中容易漏掉某些路径。
- 别在 getter 里写
await fetch()—— 异步结果不是响应式，不会被追踪 - 条件访问要兜底：用
user?.profile?.city || '未知'，而不是if (user) return user.profile.city，防止初始值为空导致依赖未建立 - 数组 filter / map 后取值（如
items.filter(x => x.active)[0]?.name）能被追踪，但要注意索引变化可能影响稳定性
调试依赖是否完整
当计算属性没更新，优先验证依赖是否被正常收集。
- 在 getter 开头加
console.log('recomputed')，看是否执行 —— 不打印说明依赖没变或根本没收集到 - 检查是否误用了非响应式值（如普通对象字面量、解构后的属性、函数返回的临时对象）
- 使用 Vue Devtools 的 “Reactivity” 面板，查看该 computed 对应的依赖列表是否包含预期字段
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
