VUE 3.0源码之watch和watchEffect

soooyoung

于 2020-11-11 17:38:26 发布

阅读量1.2k

点赞数

分类专栏： vue3 源码 vue 文章标签： vue

本文链接：https://blog.csdn.net/soooyoung/article/details/109601136

版权

本文深入探讨Vue 3.0中watch和watchEffect的区别与相似之处，分析它们在数据监听和副作用处理上的差异，包括参数数量、功能特性以及如何停止监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.watch和watchEffect

这两都是直接调用doWatch方法，唯一区别就是第二个参数不同。

export function watchEffect(
  effect: WatchEffect,
  options?: WatchOptionsBase
): WatchStopHandle {
   
  return doWatch(effect, null, options)
}
export function watch<T = any>(
  source: WatchSource<T> | WatchSource<T>[],
  cb: WatchCallback<T>,
  options?: WatchOptions
): WatchStopHandle {
   
  // 省略参数校验
  return doWatch(source, cb, options)
}

2.doWatch

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect,
  cb: WatchCallback | null,
  {
    immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle {
   
  // 当前组件实例
  const instance = currentInstance
  // 将不同类型的监视对象封装成函数，并在函数内部触发相关get，类似计算属性
  let getter: () => any
  if (isArray(source)) {
   
    getter = () =>
      source.map(s => {
   
        if (isRef(s)) {
   
          return s.value

最低0.47元/天解锁文章