响应式 | 简述 computed 的实现与特性

1. 核心类和接口定义

• ComputedRef 接口：只读计算属性的类型定义

• WritableComputedRef 接口：可写计算属性的类型定义

• ComputedRefImpl 类：计算属性的具体实现类

2. computed 函数设计

  export function computed<T>(
    getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
    debugOptions?: DebuggerOptions,
    isSSR = false,
  )

• 这是用户主要使用的 API，支持两种方式创建计算属性：

  • 传入 getter 函数创建只读计算属性

  • 传入包含 get/set 的对象创建可写计算属性

3. 响应式特性：

• 通过 Dep 类管理依赖关系

• 实现了脏值检查机制（通过 EffectFlags.DIRTY 标记）

• 支持依赖追踪（通过 dep.track()）

• 实现了计算缓存（只有依赖变化时才重新计算）

4. 重要特性：

• 懒计算：只有在访问 .value 时才进行计算

• 缓存：计算结果会被缓存，直到依赖发生变化

• 自动追踪依赖

• 支持 SSR（服务端渲染）

• 开发环境调试支持（通过 onTrack 和 onTrigger）

5.使用示例：

// 只读计算属性
const count = ref(1)
const plusOne = computed(() => count.value + 1)

// 可写计算属性
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})