djdg626的博客

Vue3监听器的使用

发布于：
vue

#监听器基本使用

监听器主要为 watch 函数和 watchEffect 函数

#watch 函数基本使用

watch函数第一个参数是watch监听的数据源，一般有以下几种
  • 一个ref
  • 一个计算属性
  • 一个reactive
  • 一个getter函数（一个回调函数）
  • 包含多个上述数据源的数组
watch函数第二个参数是watch数据源变动时会触发的函数
watch函数第三个参数是配置项
js
wacth("依赖", () => {}, {});
watch传入reactive会自动开启深度遍历
如果不希望开启深度遍历，可以用回调函数返回reactive，那么将不会默认开启，而是返回的reactive改变时才会触发watch回调函数。

#watchEffect

watchEffect和watch相比，无需手动指定数据源，而是会自动去寻找watch回调函数中的响应式依赖，并且watchEffect会在首次立即执行。
js
// ref todoId改变时，watchEffect会自动触发，并且初次渲染也会自动触发
watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

#watch 和 watchEffect的取舍

  • watch可以显式指定需要监听的值，能精准控制触发时机
  • watchEffect自动监听需要监听的值，方便，但是代码的依赖关系不能一目了然
  • watch默认第一次不执行，第一次监听数据源改变后才会指向
  • watchEffect默认执行一次
  • watch监听对象的属性，需要使用getter函数返回这个属性，不能直接监听对象的属性（因为对象的属性不是响应式值）
  • watchEffect监听对象的属性，直接在回调函数中写就行了

#watch和watchEffect的配置

  • 默认情况下，侦听器将在组件渲染之前执行。设置 flush: 'post' 将会使侦听器延迟到组件渲染之后再执行。即如果要获取更新后的dom，设置flush=post
  • onTrack和onTrigger是调试用函数，track在依赖项被访问时触发，trigger在依赖项被修改时触发
ts
// watch的配置项
export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
    immediate?: Immediate;
    deep?: boolean;
    once?: boolean;
    flush?: 'pre' | 'post' | 'sync';
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
}
 
// watchEffect的配置项
export interface WatchOptionsBase extends DebuggerOptions {
    flush?: 'pre' | 'post' | 'sync';
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
}

#停止watch

  • watch和watchEffect会返回一个停止监听函数
  • 同步创建的watch，组件销毁时会自动停止