Vue计算属性自动更新依赖响应式系统的依赖收集与精准通知机制：读取时通过getter收集Watcher，变更时通过setter触发缓存更新与惰性求值，具备缓存而methods无。
Vue.js 的计算属性（computed）之所以能“自动更新”，核心在于其依赖追踪与响应式系统协同工作——不是靠轮询或脏检查，而是通过数据被读取时收集依赖、被修改时精准通知来实现的。
依赖是如何被“收集”起来的？
当组件首次渲染或计算属性首次求值时，Vue 会进入“依赖收集模式”。此时访问响应式数据（如 this.msg）会触发其 getter，而这个 getter 内部不仅返回值，还会把当前正在执行的计算属性（或渲染函数）作为“观察者”（Watcher）记录到该数据的依赖列表中（Dep）。这个过程是隐式的、递归的：如果计算属性内部又读取了另一个响应式字段，后者也会同步收集同一个 Watcher。
关键点：
- 收集只发生在取值时（即 getter 被调用），赋值（setter）不收集
- 只有被标记为响应式的对象/数组属性才会触发收集；普通属性、未初始化的字段、Map/Set 等原生集合不会
- 计算属性的 getter 必须是同步的，异步操作（如 setTimeout、Promise.then）中的取值不会被追踪
数据变化后，谁被通知？怎么通知？
当响应式数据变更（如 this.msg = 'new'），其 setter 会立即遍历自身关联的 Dep 中所有 Watcher，并调用它们的 update() 方法。对于计算属性对应的 Watcher，update() 不会立刻重新求值，而是将其标记为“待求值”（dirty = true），并在下一个微任务（nextTick）中批量、惰性地执行求值逻辑。
立即学习“前端免费学习笔记（深入）”；
这种设计避免了重复计算和响应风暴：
- 多个数据同时变更 → 只触发一次重新求值
- 一个计算属性被多个地方使用（模板、其他 computed）→ 仍只维护一个 Watcher，共享缓存结果
- 若依赖未变，再次访问时直接返回缓存值，不执行 getter 函数
为什么 computed 有缓存，methods 没有？
本质区别不在语法，而在 Vue 对它们的封装方式：
- computed 被包装为一个带缓存的响应式引用（RefImpl + lazy watcher），自带 dirty 标志和 value 缓存字段
- methods 是普通函数，每次模板调用都直接执行，不经过响应式系统调度，也不参与依赖收集（除非你在 method 里手动读取响应式数据，但那不会触发自动更新）
换句话说：是否缓存，取决于它是否被注册为一个响应式依赖节点，而不是“有没有写 return”。
常见陷阱与调试建议
实际开发中，以下情况会导致计算属性“不更新”或“误更新”：
- 数组索引赋值（arr[0] = xxx）或修改 length —— Vue 2 无法检测，需用 Vue.set / this.$set；Vue 3 使用 Proxy 已支持，但仍建议用 push/splice 等变异方法
- 向响应式对象添加全新属性（this.obj.newKey = val）—— 需先用 Vue.set（Vue 2）或 reactive({ ...obj, newKey: val })（Vue 3）
- 计算属性内部包含非响应式源（如 Date.now()、Math.random()、props 的非响应式解构）→ 这些不会触发重算，应改用 watch 或 provide/inject 显式控制
- 在 setup() 中使用 computed(() => {...}) 时，确保闭包内访问的是响应式引用（ref 或 reactive），而非解构后的普通变量
