Vue计算属性如何依赖追踪详解

Vue计算属性的“自动更新”并非魔法，而是依赖响应式系统精妙的依赖收集与精准通知机制：读取数据时通过getter隐式收集当前计算属性作为Watcher，修改数据时通过setter触发标记为脏并惰性求值，既保证了变化时的及时响应，又通过缓存避免重复计算；这与每次调用都执行的methods有本质区别——缓存与否取决于是否被纳入响应式依赖追踪链，而非语法形式。理解这一原理，不仅能避开数组索引赋值、动态新增属性、非响应式源等常见陷阱，更能写出更高效、可预测的Vue代码。

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），而非解构后的普通变量

本篇关于《Vue计算属性如何依赖追踪详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！