Vue3源码解读computed和watch

computed

computed和watch在面试中经常被问到他们的区别，那么我们就从源码的实现来看看他们的具体实现

 
// packages/reactivity/src/computed.ts
export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions,
  isSSR = false
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>
  const onlyGetter = isFunction(getterOrOptions)
  if (onlyGetter) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  // new ComputedRefImpl
  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR)
  if (__DEV__ && debugOptions && !isSSR) {
    cRef.effect.onTrack = debugOptions.onTrack
    cRef.effect.onTrigger = debugOptions.onTrigger
  }
  // 返回ComputedRefImpl实例
  return cRef as any
}

可以看到computed内部只是先处理getter和setter，然后new一个ComputedRefImpl返回，如果你知道ref API的实现，可以发现他们的实现有很多相同之处

ComputedRefImpl

 
// packages/reactivity/src/computed.ts
export class ComputedRefImpl<T> {
  public dep?: Dep = undefined // 存储effect的集合
  private _value!: T
  public readonly effect: ReactiveEffect<T>
  public readonly __v_isRef = true
  public readonly [ReactiveFlags.IS_READONLY]: boolean = false
  public _dirty = true // 是否需要重新更新value
  public _cacheable: boolean
  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean,
    isSSR: boolean
  ) {
    // 创建effect
    this.effect = new ReactiveEffect(getter, () => {
      // 调度器执行 重新赋值_dirty为true
      if (!this._dirty) {
        this._dirty = true
        // 触发effect
        triggerRefValue(this)
      }
    })
    // 用于区分effect是否是computed
    this.effect.computed = this
    this.effect.active = this._cacheable = !isSSR
    this[ReactiveFlags.IS_READONLY] = isReadonly
  }
  get value() {
    // the computed ref may get wrapped by other proxies e.g. readonly() #
    // computed ref可能被其他代理包装，例如readonly() #
    // 通过toRaw()获取原始值
    const self = toRaw(this)
    // 收集effect
    trackRefValue(self)
    // 如果是脏的，重新执行effect.run()，并且将_dirty设置为false
    if (self._dirty || !self._cacheable) {
      self._dirty = false
      // run()方法会执行getter方法 值会被缓存到self._value
      self._value = self.effect.run()!
    }
    return self._value
  }
  set value(newValue: T) {
    this._setter(newValue)
  }
}

可以看到ComputedRefImplget的get实现基本和ref的get相同（不熟悉ref实现的请看上一章），唯一的区别就是_dirty值的判断，这也是我们常说的computed会缓存value，那么computed是如何知道value需要更新呢？

可以看到在computed构造函数中，会建立一个getter与其内部响应式数据的关系，这跟我们组件更新函数跟响应式数据建立关系是一样的，所以与getter相关的响应式数据发生修改的时候，就会触发getter effect 对应的scheduler，这里会将_dirty设置为true并去执行收集到的effect（这里通常是执行get里收集到的函数更新的effect），然后就会去执行函数更新函数，里面会再次触发computed的get，此时dirty已经被置为true，就会重新执行getter获取新的值返回，并将该值缓存到_vlaue。

小结：

所以computed是有两层的响应式处理的，一层是computed.value和函数的effect之间的关系(与ref的实现相似)，一层是computed的getter和响应式数据的关系。

注意：如果你足够细心就会发现函数更新函数的effect触发和computed getter的effect的触发之间可能存在顺序的问题。假如有一个响应式数据a不仅存在于getter中，还在函数render中早于getter被访问，此时a对应的dep中更新函数的effect就会早于getter的effect被收集，如果此时a被改变，就会先执行更新函数的effect，那么此时render函数访问到computed.value的时候就会发现_dirty依然是false，因为getter的effect还没有被执行，那么此时依然会是旧值。vue3中对此的处理是执行effects的时候会优先执行computed对应的effect（此前章节也有提到）：

 
// packages/reactivity/src/effect.ts
export function triggerEffects( 
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
 ) {
  // spread into array for stabilization
  const effects = isArray(dep) ? dep : [...dep]
  // computed的effect会先执行
  // 防止render获取computed值得时候_dirty还没有置为true
  for (const effect of effects) {
    if (effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
}

watch

watch相对于computed要更简单一些，因为他只用建立getter与响应式数据之间的关系，在响应式数据变化时调用用户传过来的回调并将新旧值传入即可

 
// packages/runtime-core/src/apiWatch.ts
export function watch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: any,
  options?: WatchOptions<Immediate>
): WatchStopHandle {
  if (__DEV__ && !isFunction(cb)) {
    warn(...)
  }
  // watch 具体实现
  return doWatch(source as any, cb, options)
}
function doWatch( 
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
 ): WatchStopHandle {
  if (__DEV__ && !cb) {
    ...
  }
  const warnInvalidSource = (s: unknown) => {
    warn(...)
  }
  const instance =
    getCurrentScope() === currentInstance?.scope ? currentInstance : null
  // const instance = currentInstance
  let getter: () => any
  let forceTrigger = false
  let isMultiSource = false
  // 根据不同source 创建不同的getter函数
  // getter 函数与computed的getter函数作用类似
  if (isRef(source)) {
    getter = () => source.value
    forceTrigger = isShallow(source)
  } else if (isReactive(source)) {
    // source是reactive对象时 自动开启deep=true
    getter = () => source
    deep = true
  } else if (isArray(source)) {
    isMultiSource = true
    forceTrigger = source.some(s => isReactive(s) || isShallow(s))
    getter = () =>
      source.map(s => {
        if (isRef(s)) {
          return s.value
        } else if (isReactive(s)) {
          return traverse(s)
        } else if (isFunction(s)) {
          return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
        } else {
          __DEV__ && warnInvalidSource(s)
        }
      })
  } else if (isFunction(source)) {
    if (cb) {
      // getter with cb
      getter = () =>
        callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
    } else {
      // no cb -> simple effect
      getter = () => {
        if (instance && instance.isUnmounted) {
          return
        }
        if (cleanup) {
          cleanup()
        }
        return callWithAsyncErrorHandling(
          source,
          instance,
          ErrorCodes.WATCH_CALLBACK,
          [onCleanup]
        )
      }
    }
  } else {
    getter = NOOP
    __DEV__ && warnInvalidSource(source)
  }
  //.x array mutation watch compat
  // 兼容vue
  if (__COMPAT__ && cb && !deep) {
    const baseGetter = getter
    getter = () => {
      const val = baseGetter()
      if (
        isArray(val) &&
        checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
      ) {
        traverse(val)
      }
      return val
    }
  }
  // 深度监听
  if (cb && deep) {
    const baseGetter = getter
    // traverse会递归遍历对象的所有属性 以达到深度监听的目的
    getter = () => traverse(baseGetter())
  }
  let cleanup: () => void
  // watch回调的第三个参数 可以用此注册一个cleanup函数 会在下一次watch cb调用前执行
  // 常用于竞态问题的处理
  let onCleanup: OnCleanup = (fn: () => void) => {
    cleanup = effect.onStop = () => {
      callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
    }
  }
  // in SSR there is no need to setup an actual effect, and it should be noop
  // unless it's eager or sync flush
  let ssrCleanup: (() => void)[] | undefined
  if (__SSR__ && isInSSRComponentSetup) {
    // ssr处理 ...
  }
  // oldValue 声明 多个source监听则初始化为数组
  let oldValue: any = isMultiSource
    ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
    : INITIAL_WATCHER_VALUE
  // 调度器调用时执行
  const job: SchedulerJob = () => {
    if (!effect.active) {
      return
    }
    if (cb) {
      // watch(source, cb)
      // 获取newValue
      const newValue = effect.run()
      if (
        deep ||
        forceTrigger ||
        (isMultiSource
          ? (newValue as any[]).some((v, i) =>
              hasChanged(v, (oldValue as any[])[i])
            )
          : hasChanged(newValue, oldValue)) ||
        (__COMPAT__ &&
          isArray(newValue) &&
          isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
      ) {
        // cleanup before running cb again
        if (cleanup) {
          // 执行onCleanup传过来的函数
          cleanup()
        }
        // 调用cb 参数为newValue、oldValue、onCleanup
        callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
          newValue,
          // pass undefined as the old value when it's changed for the first time
          oldValue === INITIAL_WATCHER_VALUE
            ? undefined
            : isMultiSource && oldValue[] === INITIAL_WATCHER_VALUE
            ? []
            : oldValue,
          onCleanup
        ])
        // 更新oldValue
        oldValue = newValue
      }
    } else {
      // watchEffect
      effect.run()
    }
  }
  // important: mark the job as a watcher callback so that scheduler knows
  // it is allowed to self-trigger (#)
  job.allowRecurse = !!cb
  let scheduler: EffectScheduler
  if (flush === 'sync') {
    // 同步更新 即每次响应式数据改变都会回调一次cb 通常不使用
    scheduler = job as any // the scheduler function gets called directly
  } else if (flush === 'post') {
    // job放入pendingPostFlushCbs队列中
    // pendingPostFlushCbs队列会在queue队列执行完毕后执行 函数更新effect通常会放在queue队列中
    // 所以pendingPostFlushCbs队列执行时组件已经更新完毕
    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
  } else {
    // default: 'pre'
    job.pre = true
    if (instance) job.id = instance.uid
    // 默认异步更新 关于异步更新会和nextTick放在一起详细讲解
    scheduler = () => queueJob(job)
  }
  // 创建effect effect.run的时候建立effect与getter内响应式数据的关系
  const effect = new ReactiveEffect(getter, scheduler)
  if (__DEV__) {
    effect.onTrack = onTrack
    effect.onTrigger = onTrigger
  }
  // initial run
  if (cb) {
    if (immediate) {
      // 立马执行一次job
      job()
    } else {
      // 否则执行effect.run() 会执行getter 获取oldValue
      oldValue = effect.run()
    }
  } else if (flush === 'post') {
    queuePostRenderEffect(
      effect.run.bind(effect),
      instance && instance.suspense
    )
  } else {
    effect.run()
  }
  // 返回一个取消监听的函数
  const unwatch = () => {
    effect.stop()
    if (instance && instance.scope) {
      remove(instance.scope.effects!, effect)
    }
  }
  if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)
  return unwatch
}

	// packages/reactivity/src/computed.ts
	export function computed<T>(
	getterOrOptions: ComputedGetter<T> \| WritableComputedOptions<T>,
	debugOptions?: DebuggerOptions,
	isSSR = false
	) {
	let getter: ComputedGetter<T>
	let setter: ComputedSetter<T>
	const onlyGetter = isFunction(getterOrOptions)
	if (onlyGetter) {
	getter = getterOrOptions
	setter = __DEV__
	? () => {
	console.warn('Write operation failed: computed value is readonly')
	}
	: NOOP
	} else {
	getter = getterOrOptions.get
	setter = getterOrOptions.set
	}
	// new ComputedRefImpl
	const cRef = new ComputedRefImpl(getter, setter, onlyGetter \|\| !setter, isSSR)
	if (__DEV__ && debugOptions && !isSSR) {
	cRef.effect.onTrack = debugOptions.onTrack
	cRef.effect.onTrigger = debugOptions.onTrigger
	}
	// 返回ComputedRefImpl实例
	return cRef as any
	}

	// packages/reactivity/src/computed.ts
	export class ComputedRefImpl<T> {
	public dep?: Dep = undefined // 存储effect的集合
	private _value!: T
	public readonly effect: ReactiveEffect<T>
	public readonly __v_isRef = true
	public readonly [ReactiveFlags.IS_READONLY]: boolean = false
	public _dirty = true // 是否需要重新更新value
	public _cacheable: boolean
	constructor(
	getter: ComputedGetter<T>,
	private readonly _setter: ComputedSetter<T>,
	isReadonly: boolean,
	isSSR: boolean
	) {
	// 创建effect
	this.effect = new ReactiveEffect(getter, () => {
	// 调度器执行重新赋值_dirty为true
	if (!this._dirty) {
	this._dirty = true
	// 触发effect
	triggerRefValue(this)
	}
	})
	// 用于区分effect是否是computed
	this.effect.computed = this
	this.effect.active = this._cacheable = !isSSR
	this[ReactiveFlags.IS_READONLY] = isReadonly
	}
	get value() {
	// the computed ref may get wrapped by other proxies e.g. readonly() #
	// computed ref可能被其他代理包装，例如readonly() #
	// 通过toRaw()获取原始值
	const self = toRaw(this)
	// 收集effect
	trackRefValue(self)
	// 如果是脏的，重新执行effect.run()，并且将_dirty设置为false
	if (self._dirty \|\| !self._cacheable) {
	self._dirty = false
	// run()方法会执行getter方法值会被缓存到self._value
	self._value = self.effect.run()!
	}
	return self._value
	}
	set value(newValue: T) {
	this._setter(newValue)
	}
	}

	// packages/reactivity/src/effect.ts
	export function triggerEffects(
	dep: Dep \| ReactiveEffect[],
	debuggerEventExtraInfo?: DebuggerEventExtraInfo
	) {
	// spread into array for stabilization
	const effects = isArray(dep) ? dep : [...dep]
	// computed的effect会先执行
	// 防止render获取computed值得时候_dirty还没有置为true
	for (const effect of effects) {
	if (effect.computed) {
	triggerEffect(effect, debuggerEventExtraInfo)
	}
	}
	for (const effect of effects) {
	if (!effect.computed) {
	triggerEffect(effect, debuggerEventExtraInfo)
	}
	}
	}

	// packages/runtime-core/src/apiWatch.ts
	export function watch<T = any, Immediate extends Readonly<boolean> = false>(
	source: T \| WatchSource<T>,
	cb: any,
	options?: WatchOptions<Immediate>
	): WatchStopHandle {
	if (__DEV__ && !isFunction(cb)) {
	warn(...)
	}
	// watch 具体实现
	return doWatch(source as any, cb, options)
	}
	function doWatch(
	source: WatchSource \| WatchSource[] \| WatchEffect \| object,
	cb: WatchCallback \| null,
	{ immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
	): WatchStopHandle {
	if (__DEV__ && !cb) {
	...
	}
	const warnInvalidSource = (s: unknown) => {
	warn(...)
	}
	const instance =
	getCurrentScope() === currentInstance?.scope ? currentInstance : null
	// const instance = currentInstance
	let getter: () => any
	let forceTrigger = false
	let isMultiSource = false
	// 根据不同source 创建不同的getter函数
	// getter 函数与computed的getter函数作用类似
	if (isRef(source)) {
	getter = () => source.value
	forceTrigger = isShallow(source)
	} else if (isReactive(source)) {
	// source是reactive对象时自动开启deep=true
	getter = () => source
	deep = true
	} else if (isArray(source)) {
	isMultiSource = true
	forceTrigger = source.some(s => isReactive(s) \|\| isShallow(s))
	getter = () =>
	source.map(s => {
	if (isRef(s)) {
	return s.value
	} else if (isReactive(s)) {
	return traverse(s)
	} else if (isFunction(s)) {
	return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
	} else {
	__DEV__ && warnInvalidSource(s)
	}
	})
	} else if (isFunction(source)) {
	if (cb) {
	// getter with cb
	getter = () =>
	callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)
	} else {
	// no cb -> simple effect
	getter = () => {
	if (instance && instance.isUnmounted) {
	return
	}
	if (cleanup) {
	cleanup()
	}
	return callWithAsyncErrorHandling(
	source,
	instance,
	ErrorCodes.WATCH_CALLBACK,
	[onCleanup]
	)
	}
	}
	} else {
	getter = NOOP
	__DEV__ && warnInvalidSource(source)
	}
	//.x array mutation watch compat
	// 兼容vue
	if (__COMPAT__ && cb && !deep) {
	const baseGetter = getter
	getter = () => {
	const val = baseGetter()
	if (
	isArray(val) &&
	checkCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance)
	) {
	traverse(val)
	}
	return val
	}
	}
	// 深度监听
	if (cb && deep) {
	const baseGetter = getter
	// traverse会递归遍历对象的所有属性以达到深度监听的目的
	getter = () => traverse(baseGetter())
	}
	let cleanup: () => void
	// watch回调的第三个参数可以用此注册一个cleanup函数会在下一次watch cb调用前执行
	// 常用于竞态问题的处理
	let onCleanup: OnCleanup = (fn: () => void) => {
	cleanup = effect.onStop = () => {
	callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
	}
	}
	// in SSR there is no need to setup an actual effect, and it should be noop
	// unless it's eager or sync flush
	let ssrCleanup: (() => void)[] \| undefined
	if (__SSR__ && isInSSRComponentSetup) {
	// ssr处理 ...
	}
	// oldValue 声明多个source监听则初始化为数组
	let oldValue: any = isMultiSource
	? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
	: INITIAL_WATCHER_VALUE
	// 调度器调用时执行
	const job: SchedulerJob = () => {
	if (!effect.active) {
	return
	}
	if (cb) {
	// watch(source, cb)
	// 获取newValue
	const newValue = effect.run()
	if (
	deep \|\|
	forceTrigger \|\|
	(isMultiSource
	? (newValue as any[]).some((v, i) =>
	hasChanged(v, (oldValue as any[])[i])
	)
	: hasChanged(newValue, oldValue)) \|\|
	(__COMPAT__ &&
	isArray(newValue) &&
	isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
	) {
	// cleanup before running cb again
	if (cleanup) {
	// 执行onCleanup传过来的函数
	cleanup()
	}
	// 调用cb 参数为newValue、oldValue、onCleanup
	callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
	newValue,
	// pass undefined as the old value when it's changed for the first time
	oldValue === INITIAL_WATCHER_VALUE
	? undefined
	: isMultiSource && oldValue[] === INITIAL_WATCHER_VALUE
	? []
	: oldValue,
	onCleanup
	])
	// 更新oldValue
	oldValue = newValue
	}
	} else {
	// watchEffect
	effect.run()
	}
	}
	// important: mark the job as a watcher callback so that scheduler knows
	// it is allowed to self-trigger (#)
	job.allowRecurse = !!cb
	let scheduler: EffectScheduler
	if (flush === 'sync') {
	// 同步更新即每次响应式数据改变都会回调一次cb 通常不使用
	scheduler = job as any // the scheduler function gets called directly
	} else if (flush === 'post') {
	// job放入pendingPostFlushCbs队列中
	// pendingPostFlushCbs队列会在queue队列执行完毕后执行函数更新effect通常会放在queue队列中
	// 所以pendingPostFlushCbs队列执行时组件已经更新完毕
	scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
	} else {
	// default: 'pre'
	job.pre = true
	if (instance) job.id = instance.uid
	// 默认异步更新关于异步更新会和nextTick放在一起详细讲解
	scheduler = () => queueJob(job)
	}
	// 创建effect effect.run的时候建立effect与getter内响应式数据的关系
	const effect = new ReactiveEffect(getter, scheduler)
	if (__DEV__) {
	effect.onTrack = onTrack
	effect.onTrigger = onTrigger
	}
	// initial run
	if (cb) {
	if (immediate) {
	// 立马执行一次job
	job()
	} else {
	// 否则执行effect.run() 会执行getter 获取oldValue
	oldValue = effect.run()
	}
	} else if (flush === 'post') {
	queuePostRenderEffect(
	effect.run.bind(effect),
	instance && instance.suspense
	)
	} else {
	effect.run()
	}
	// 返回一个取消监听的函数
	const unwatch = () => {
	effect.stop()
	if (instance && instance.scope) {
	remove(instance.scope.effects!, effect)
	}
	}
	if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)
	return unwatch
	}

Vue3源码解读computed和watch

目录

computed

ComputedRefImpl

小结：

watch