Vue 3 的 watch 侦听器

watch 做什么#

watch 监听响应式数据，数据变化时执行回调。它接收监听源、回调函数和配置项三个参数。

1
watch(
2
  source,     // ref、reactive 对象、getter 或数组
3
  callback,   // (newValue, oldValue, onCleanup) => {}
4
  options,    // { immediate, deep, onTrack, onTrigger }
5
)

immediate: true 让回调在创建时先执行一次。deep: true 让侦听器递归监听对象内部的变化。

监听单个 ref#

传入 ref 本身时，不加 deep 的 watch 只比较 message.value 是否被整体替换。要跟踪 nav.bar.name 这类嵌套属性，必须加 deep: true。

1
const message = ref({ nav: { bar: { name: '' } } })
2

3
watch(
4
  message,
5
  (newValue, oldValue) => {
6
    console.log(newValue, oldValue)
7
  },
8
  { immediate: true, deep: true },
9
)

同时监听多个 ref#

监听源写成数组，回调的 newValue 和 oldValue 也是数组，顺序与监听源一致。数组里任意一项变化都会触发。

1
const a = ref('')
2
const b = ref('')
3

4
watch([a, b], ([newA, newB], [oldA, oldB]) => {
5
  // a 或 b 变化都会执行
6
})

监听 reactive 对象#

传入 reactive 对象会隐式创建深度侦听，加不加 deep: true 效果一样，任意层级的属性变化都会触发回调。

1
const state = reactive({ nav: { bar: { name: '' } } })
2

3
watch(state, (newValue, oldValue) => {
4
  // nav.bar.name 变化也会触发
5
})

监听 reactive 的单个属性#

监听 reactive 的某个属性要传 getter 函数。直接写 state.name 不行，那是在求值，传进去的是一个普通字符串，watch 收不到任何依赖。

1
watch(
2
  () => state.name,
3
  (newValue, oldValue) => {
4
    // 只有 state.name 变化才触发
5
  },
6
)

用 getter 只追踪这一个属性，嵌套更深的路径写成 () => state.nav.bar.name 同样有效。

回调的清理函数#

回调的第三个参数是 onCleanup，完整签名是 (newValue, oldValue, onCleanup)。它在侦听器下一次执行回调之前运行，用来撤销上一次留下的副作用，比如定时器、事件监听和未完成的请求。

1
const keyword = ref('')
2

3
watch(keyword, (newValue, oldValue, onCleanup) => {
4
  const timer = setTimeout(() => {
5
    // 请求搜索结果
6
  }, 300)
7

8
  onCleanup(() => clearTimeout(timer))
9
})

只在开发环境生效的选项#

onTrack 在依赖被追踪时调用，onTrigger 在依赖触发变化时调用。

1
watch(source, callback, {
2
  onTrack(e) {
3
    console.log('track', e)
4
  },
5
  onTrigger(e) {
6
    console.log('trigger', e)
7
  },
8
})

当海风翻页时

watch 做什么#

监听单个 ref#

同时监听多个 ref#

监听 reactive 对象#

监听 reactive 的单个属性#

回调的清理函数#

只在开发环境生效的选项#

Vue 3 学习笔记

继续阅读

换条路线

当海风翻页时

watch 做什么#

监听单个 ref#

同时监听多个 ref#

监听 reactive 对象#

监听 reactive 的单个属性#

回调的清理函数#

只在开发环境生效的选项#

分享文章

沿着主题读

换条路线