1. 从依赖追踪到缓存优化：computed的响应式本质
在Vue3的响应式系统中，computed属性就像个智能计算器——它不仅能自动追踪依赖项的变化，还会在值未改变时避免重复计算。这种特性源于其底层实现的精妙设计，我们通过一个简单的计数器示例来观察：
javascript复制const count = ref(0)
const double = computed(() => count.value * 2)
当count.value变化时，double会自动更新，但连续多次访问double.value时，只要count未变就不会重复执行计算函数。这种智能行为是通过以下核心机制实现的：
1.1 依赖收集的触发时机
每个computed属性在首次求值时，会通过effect函数建立一个响应式上下文。此时任何被访问的响应式变量（如count.value）都会通过track函数将当前computed实例注册为自己的依赖。这个过程就像在超市结账时，收银系统自动记录了你购买的商品清单。
1.2 缓存策略的实现原理
computed内部维护着_dirty和_value两个关键状态：
- _dirty：标识是否需要重新计算（默认true）
- _value：缓存的上次计算结果
当访问computed值时，会先检查_dirty状态。若为true则执行计算并缓存结果，否则直接返回_value。这种设计使得在Vue组件渲染期间，即使模板中多次使用同一个computed属性，也只会计算一次。
关键提示：computed的缓存是惰性的，只有真正访问其.value时才会触发重新计算。这与watch的主动监听有本质区别。
2. 源码级实现解析
2.1 ComputedRefImpl类结构
在Vue3源码中（reactivity/computed.ts），核心实现类是ComputedRefImpl。其构造函数主要完成以下工作：
typescript复制class ComputedRefImpl<T> {
private _value!: T
private _dirty = true
constructor(
private getter: ComputedGetter<T>,
private _setter: ComputedSetter<T>
) {
this.effect = new ReactiveEffect(
() => getter(),
() => triggerRefValue(this)
)
}
}
2.2 响应式依赖的建立过程
当创建computed时，Vue会通过ReactiveEffect创建一个响应式副作用。这个副作用函数会在两种情况下执行：
- 首次读取computed值时（get value()）
- 依赖项变更时（通过调度器触发）
特别值得注意的是effect的第二个参数——调度器函数。当依赖变化时，不是立即重新计算值，而是将_dirty标记为true，等到下次访问时再计算。这种延迟计算策略能有效避免不必要的计算开销。
2.3 getter/setter的完整流程
computed属性的访问和修改遵循特定生命周期：
mermaid复制graph TD
A[访问.value] --> B{_dirty?}
B -->|是| C[执行getter计算]
C --> D[缓存结果到_value]
D --> E[返回_value]
B -->|否| E
F[设置.value] --> G[执行_setter]
3. 高级应用场景
3.1 复杂对象计算
computed不仅适用于简单计算，在处理复杂对象时更能体现其价值：
javascript复制const user = reactive({
firstName: '张',
lastName: '三'
})
const fullName = computed({
get: () => `${user.firstName}·${user.lastName}`,
set: (val) => {
const [first, last] = val.split('·')
user.firstName = first
user.lastName = last
}
})
这种双向绑定的computed特别适合处理需要格式化的表单数据。
3.2 性能优化实践
在大型表格渲染场景中，合理使用computed可以显著提升性能：
javascript复制const tableData = ref(/* 大量数据 */)
const visibleData = computed(() => {
return tableData.value
.filter(item => item.status === 'active')
.sort((a, b) => a.sortKey - b.sortKey)
})
这样即使tableData频繁变化，只要过滤和排序结果不变，组件就不会重新渲染。
3.3 与watch的配合使用
computed和watch可以形成互补关系：
javascript复制const searchQuery = ref('')
const filteredList = computed(() =>
allItems.value.filter(item => item.includes(searchQuery.value))
)
watch(filteredList, (newVal) => {
// 只在过滤结果真正变化时执行
console.log('新的过滤结果:', newVal)
})
这种模式避免了在watch中直接处理复杂计算逻辑。
4. 实战中的常见问题
4.1 副作用陷阱
在computed getter中执行副作用操作是危险行为：
javascript复制// 反例
const badComputed = computed(() => {
console.log('计算中...') // 副作用
return someRef.value * 2
})
这可能导致：
- 开发环境警告
- 服务端渲染时内存泄漏
- 不可预测的重新计算
4.2 异步操作限制
computed不支持异步操作，这是设计上的明确限制。需要异步计算时应使用组合式函数：
javascript复制// 正确做法
function useAsyncComputed(getter) {
const result = ref(null)
watchEffect(async () => {
result.value = await getter()
})
return readonly(result)
}
4.3 循环依赖问题
当computed之间形成循环引用时：
javascript复制const a = computed(() => b.value + 1)
const b = computed(() => a.value + 1) // 循环依赖
Vue会抛出"Maximum recursive updates exceeded"错误。解决方案是重构逻辑或使用watch处理相互依赖。
5. 性能调优指南
5.1 计算复杂度控制
computed的计算函数应该保持简单快速。对于O(n)以上复杂度的操作，建议：
- 预处理原始数据
- 使用Web Worker分流计算
- 考虑分页或虚拟滚动
5.2 依赖数量优化
每个额外的依赖都会增加响应式系统的开销。可以通过以下方式减少依赖：
javascript复制// 优化前
const fullName = computed(() => `${user.firstName} ${user.lastName}`)
// 优化后
const firstName = ref('张')
const lastName = ref('三')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
5.3 调试技巧
在开发环境中，可以通过以下方式调试computed：
javascript复制const debugComputed = computed(() => {
// 获取当前计算属性的依赖
const deps = trackStack[trackStack.length - 1]?.deps
console.log('当前依赖:', deps)
return computeExpensiveValue()
})
或者使用Vue DevTools的"Computed"面板观察依赖关系和重新计算次数。
6. 与Vue2的实现差异
6.1 底层架构变化
Vue3的computed基于新的ReactiveEffect系统实现，相比Vue2的Watcher机制有显著改进：
| 特性 | Vue2 | Vue3 |
|---|---|---|
| 依赖追踪 | 全量收集 | 精准追踪 |
| 缓存机制 | 基于Watcher.dirty | 独立_dirty标志 |
| 执行时机 | 立即执行 | 惰性计算 |
| 内存占用 | 较高 | 减少约40% |
6.2 API变化
Vue3的computed API更加灵活：
javascript复制// Vue2方式
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
// Vue3方式
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
最大的区别是Vue3的computed可以在组件外使用，更适合组合式API的代码组织方式。
7. 在TypeScript中的增强
Vue3为computed提供了完善的类型支持：
typescript复制const user = reactive({
name: 'Alice',
age: 25
})
// 自动推断类型为ComputedRef<string>
const greeting = computed(() => `Hello, ${user.name}!`)
// 显式指定类型
const nextAge = computed<number>(() => user.age + 1)
当需要处理可能为undefined的值时：
typescript复制const maybeUser = ref<{name: string} | undefined>()
const safeName = computed(() => {
return maybeUser.value?.name ?? 'Default'
})
TypeScript会自动推断safeName的类型为ComputedRef
8. 测试策略
8.1 单元测试要点
测试computed属性时需要关注：
- 初始值是否正确
- 依赖变更时是否更新
- 缓存是否正常工作
使用Vitest的测试示例：
typescript复制import { computed, reactive } from 'vue'
describe('computed', () => {
it('should update when dependencies change', () => {
const state = reactive({ count: 0 })
const double = computed(() => state.count * 2)
expect(double.value).toBe(0)
state.count++
expect(double.value).toBe(2)
})
})
8.2 性能测试建议
对于关键路径上的computed属性，应该进行性能基准测试：
typescript复制import { bench } from 'vitest'
bench('heavy computed', () => {
const data = reactive({ items: Array(10000).fill(0) })
const sum = computed(() => data.items.reduce((a, b) => a + b))
return sum.value
}, { iterations: 100 })
9. 与其他响应式库的对比
9.1 与MobX computed比较
MobX的computed特性与Vue类似，但实现细节有差异：
- MobX采用自动追踪依赖，Vue需要显式访问.value
- MobX的computed可以嵌套，Vue3的computed是扁平结构
- MobX有更细粒度的调度控制
9.2 与RxJS对比
RxJS是更通用的响应式编程库：
| 特性 | Vue computed | RxJS |
|---|---|---|
| 目的 | 派生状态 | 事件流处理 |
| 学习曲线 | 简单 | 陡峭 |
| 内存管理 | 自动 | 需要手动取消订阅 |
| 适用场景 | UI状态派生 | 复杂异步事件流 |
10. 设计模式实践
10.1 状态规范化
在复杂状态管理中，可以使用computed实现状态规范化：
javascript复制const posts = ref([])
const authors = ref([])
const normalizedPosts = computed(() => {
return posts.value.map(post => ({
...post,
author: authors.value.find(a => a.id === post.authorId)
}))
})
10.2 中介者模式
computed可以作为不同状态之间的中介：
javascript复制const formState = reactive({
firstName: '',
lastName: '',
age: 0
})
const validation = computed(() => ({
nameValid: formState.firstName.length > 0,
ageValid: formState.age >= 18,
allValid: /* 组合其他验证 */
}))
10.3 备忘录模式
利用computed的缓存特性实现状态快照：
javascript复制const state = reactive({/* 复杂状态 */})
const stateSnapshot = computed(() =>
JSON.parse(JSON.stringify(state))
)
// 获取当前状态的深拷贝
const currentState = stateSnapshot.value