Vue3系列 - 计算属性的实现

函数重载：computed函数支持两种调用方式：传入getter函数或包含get/set的对象。

export function computed<T>(
  getter: ComputedGetter<T>,
  debugOptions?: DebuggerOptions
): ComputedRef<T>
export function computed<T>(
  options: WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions
): WritableComputedRef<T>

内部机制：计算属性内部使用Watcher实例来追踪依赖并缓存结果。

const watcher = isServerRendering()
  ? null
  : new Watcher(currentInstance, getter, noop, { lazy: true })

惰性求值：计算属性只有在被访问时才会计算值，并且会缓存结果，直到依赖项发生变化。

get value() {
  if (watcher) {
    if (watcher.dirty) {
      watcher.evaluate()
    }
    if (Dep.target) {
      watcher.depend()
    }
    return watcher.value
  } else {
    return getter()
  }
}

依赖收集：当计算属性被访问时，会收集当前正在执行的副作用（effect）作为依赖。
只读标记：如果只提供了getter，计算属性会被标记为只读。

def(ref, ReactiveFlags.IS_READONLY, onlyGetter)

计算属性的实现体现了Vue响应式系统的精髓，通过依赖追踪和缓存机制，提供了高效的派生状态管理方案。