Vue 中的 Watch，WatchEffect 与 Computed

aliencyl

已于 2024-06-24 10:29:55 修改

阅读量395

点赞数 3

文章标签： vue.js javascript 前端

于 2024-06-07 11:13:33 首次发布

本文链接：https://blog.csdn.net/aliencyl/article/details/139521426

版权

目标

Vue3 的响应式是 Vue 的一大亮点，改功能让我们的开发更加便捷和快速，其中 Watch 和 WatchEffect 区别于 Vue2 中的 Watch，下面让我们来看一下其调用方法和参数。

Watch

当我们翻看 Vue 官网中的 Watch 详解时，我们看到 ts 的定义如下：

function watch<T>(
  source: WatchSource<T>,
  callback: WatchCallback<T>,
  options?: WatchOptions
): StopHandle

看到 function 我们便知道 watch是一个方法，接收一个泛型，该值可任意指定；接下来看watch接收的参数，source为监听源，callback为监听后的回调，options为可配置的监听参数。乍一看，可能对前两个参数还比较陌生，不要急，接下来 Vue 的给我们列出了两个参数的 ts 解释。
如下：

type WatchCallback<T> = (
  value: T,
  oldValue: T,
  onCleanup: (cleanupFn: () => void) => void
) => void

type WatchSource<T> =
  | Ref<T> // ref
  | (() => T) // getter
  | T extends object
  ? T
  : never // 响应式对象

其中 WatchCallback 就是我么的第二个参数，为监听回调，可以看到，该类型为一个function，方法的第一个参数是 value，也就是新值，第二个参数为 oldValue，也就是修改前的一个值，onCleanup 是一个清楚副作用的方法，方法的参数本身也是一个方法。

接下来的 WatchSource为监听源，简单来说就是想要监听的数据，这个数据可以是 Ref类型是泛型是我们可以为Ref传递的任何 primitive数据，或者是一个 getter(一个方法返回一个值)，或者是一个对象。

总结一下，Watch方法可以监听一个数据，该数据可以为Ref,getter,和对象，我们通过调用回调，加上监听之后的副作用，回调 (cb) 中我们可以拿到新值和旧值。

最后一个参数类型就是WatchOptions，该参数在开发过程中会使用，来调试监听的处理结果中间过程，其类型如下：

interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean // 默认：false
  deep?: boolean // 默认：false
  flush?: 'pre' | 'post' | 'sync' // 默认：'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
  once?: boolean // 默认：false (3.4+)
}

该配置参数可以进行一系列，如immediate,deep,flush,onTrack,onTrigger,once配置，除onTrack和onTrigger 是传递方法，其余的基本都是 boolean 类型，所以配置起来相当便捷。

最后，我们还不能忽视，本身 Watch是有一个返回类型，也就是StopHandle,该返回类型可以帮我们清楚无效的副作用。

WatchEffect

WatchEffect 相较于 watch更加直白，我不需要增加我需要监听的数据，在该scope里，Vue 会为我自动监听数据的变化，而触发我的副作用，所以用法也相当方便。

function watchEffect(
  effect: (onCleanup: OnCleanup) => void,
  options?: WatchEffectOptions
): StopHandle

type OnCleanup = (cleanupFn: () => void) => void

interface WatchEffectOptions {
  flush?: 'pre' | 'post' | 'sync' // 默认：'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}

type StopHandle = () => void

其中watchEffectOptions是配置参数。我们可以看到，watchEffect只接收一个 effect方法，该方法有一个onCleanup清理函数的参数，在该 effect下，我们可以加上我们的逻辑，watchEffect会为我们监听我们的依赖值。注意的是，依赖值包括Ref,getter和对象。实际情况中，我们比较多的是使用Ref和Reactive作为依赖值。onCleanup方法会为我们清路无效的副作用。

Computed

Computed 是 Vue 中非常核心的一部分。Computed 接收一个 getter 函数，返回响应式 ref。注意的是，我们通过返回值的 value 属性获取响应值，但调用 value 属性的过程其实是在调用一次 getter 函数。

// 只读
function computed<T>(
  getter: (oldValue: T | undefined) => T,
  // 查看下方的 "计算属性调试" 链接
  debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>>