Vue面试题29：watch和watchEffect有何异同？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 思路

  • 1.给出两者定义；
  • 2.给出场景上的不同；
  • 3.给出使用方式和细节；
  • 4.原理阐述；

• 范例

  • watchEffect立即运行一个函数，然后被动地追踪它的依赖，当这些依赖改变时重新执行该函数；watch是
    侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数；

  • watchEffect(effect)是一种特殊watch ，传入的函数既是依赖收集的数据源，也是回调函数。如果我们不关心响应式数据变化前后的值，只是想拿这些数据做些事情，那么watchEffect就是我们需要的。watch更底层，可以接收多种数据源，包括用于依赖收集的getter函数，因此它完全可以实现watchEffect的功能，同时由于可以指定getter函数，依赖可以控制的更精确，还能获取数据变化前后的值，因此如果需要这些时我们会使用watch；

  • 在使用细节上，watchEffect在使用时，传入的函数会立刻执行一次。 watch默认情况下并不会执行回调函数，除非我们手动设置immediate选项；

  • 从实现上来说，watchEffect(fn)相当于watch(fn,fn,{immediate:true})

  • 底层来说：watchEffect和watch都是借助doWatch函数，只不过watch需要传入第二个回调cb，而watchEffect不需要传：

    //watchEffect
    export function watchEffect(
      effect:WatchEffect,
      options?:WatchOptionsBase
    ):WatchStopHandle{
      return doWatch(effect,null,options)
    }
    //watch
    export function watch<T = any，Immediate extends Readonly<boolean> = false>(
      source: T | watchSource<T>,
      cb: any,options?:watchOptions<Immediate>
    ):watchStopHandle {
      return doWatch(source as any,cb, options)
    }
    //很明显，watchEffect就是一种特殊的watch实现