Vue3 中 watch 与 watchEffect 有什么区别?

开发 前端
大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景。

你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的。

  • watch- 显式指定依赖源,依赖源更新时执行回调函数
  • watchEffect - 自动收集依赖源,依赖源更新时重新执行自身

响应式依赖收集

首先先需要了解一下 vue 3 的响应式是怎么工作的。我想很多文章都详细的讲过这个部分了,这里就简单带过一下。这里有个简化版的 ref 的实现:

const ref = (initialValue) => {  let _value = initialValue  return {    get value() {
track(this, 'value') // 收集依赖
return _value
}, set value() {
_value = value
trigger(this, 'value') // 触发依赖
}
}
}

访问数据时,track 被呼叫并记录下访问了的字段。而当写入数据时,trigger 被呼叫并触发之前所依赖了这个字段所绑定事件更新(即 effect - computed, watch, watchEffect 底层都是 effect),他们会被记录在一个全局的 WeakMap 中,这里就不展开了,感兴趣可以去看源码。

const counter = ref(1)
console.log(counter.value) // `track()` 被呼叫
counter.value = 2 // `trigger()` 被呼叫

当我们需要函数里的依赖时,只需要记录函数执行的过程中 track()被呼叫的次数(和对应的对象与字段)即可。例如:

const counter = ref(1)function foo() {  console.log(counter.value)
}function collectDeps() {
startTracking()
foo() // 在这个过程中,counter 被收集
stopTracking()
}

这样便可以知道 foo 这个函数依赖了 counter。

Watch

一个 generalised 的 watch api 应该是这样的(其他类似直接接受 ref 或者 reactive 作为参数的其实都是糖)。

watch(
() => { /* 依赖源收集函数 */ },
() => { /* 依赖源改变时的回调函数 */ }
)

这里的依赖源函数只会执行一次,回调函数会在每次依赖源改变的时候触发,但是并不对回调函数进行依赖收集。也就是说,依赖源和回调函数之间并不一定要有直接关系。

WatchEffect

watchEffect 相当于将 watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。

不同于 watch,watchEffect 的回调函数会被立即执行(即 { immediate: true })。

watchEffect(
() => { /* 依赖源同时是回调函数 */ }
)

以下两种用法在行为上基本等价:

watchEffect(  () => console.log(counter.value)
)
watch( () => counter.value, () => console.log(counter.value),
{ immediate: true }
)

与 watch 不同的一点是,在 watchEffect 中依赖源会被重复执行,动态新增加的依赖也会被收集,例如:

const counter = ref(0)const enabled = ref(false)
watchEffect(() => { if (enabled.value)
console.log(counter.value)
})// (以下忽略 nextTick)// watchEffect 会被立即执行,因为 “enabled“ 为 false, 此时仅收集到 “enabled“ 依赖counter.value += 1 // 无反应enabled.value = true // Effect 触发,控制台出 "1"counter.value += 1 // “counter“ 被作为新的依赖被收集,控制台出 "2"enabled.value = false // 函数被重新执行,无输出counter.value += 1 // 函数被重新执行,无输出 (虽然 counter 已经没有用了,但是作为依赖还是会触发函数)

顺带一提,computed 其实类似一个带输出的同步版本的 watchEffect。

什么时候用什么?

推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景(或者懒惰的场景 )。

责任编辑:庞桂玉 来源: WEB前端开发社区
相关推荐

2022-07-14 08:22:48

Computedvue3

2021-12-07 05:44:45

Vue 3 Watch WatchEffect

2018-07-13 17:05:22

SQLMySQL数据库

2023-10-13 15:48:17

OT系统

2011-08-08 14:09:55

dhcpbootp

2020-12-22 13:46:48

APISKD

2023-12-25 15:40:55

React开发

2019-02-27 15:22:15

混合云云计算多云

2021-05-16 15:28:59

沙箱容器恶意软件

2022-05-18 14:18:56

区块链加密技术数据

2020-09-06 09:51:57

SNMP TrapSyslog网络协议

2022-08-31 08:33:54

Bash操作系统Linux

2020-07-13 23:39:16

物联网IoT万物互联

2014-11-26 17:42:00

亚马逊互联网阿里巴巴

2023-02-01 08:11:40

系统调用函数

2023-06-27 14:49:34

数据中心IT 设备

2021-01-13 09:27:31

微服务API分布式

2022-06-21 12:09:18

Vue差异

2022-09-02 09:02:44

TypeInterface

2021-03-27 10:56:17

promisethenfinally
点赞
收藏

51CTO技术栈公众号