前言
你可以认为他们是同一个功能的两种不同形态,底层的实现是一样的。
- 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(
() => {
/* 依赖源收集函数 */ },
() => {
/* 依赖源改变时的回调函数 */ }
)
这里的依赖源函数只会执行一次,回调函数会在每次依赖源改变的时候触发,但是并不对回调函数进行依赖收集。也就是说,依赖源和回调函数之间并不一定要有直接关系。
侦听数据源类型
const x = ref(0)
const y = ref(0)
// 单个 ref
watch(x, (newX) => {
console.log(`x is ${
newX}`)
})
// getter 函数
watch(
() => x.value + y.value,
(sum) => {
console.log(`sum of x + y is: ${
sum}`)
}
)
// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${
newX} and y is ${
newY}`)
})
注意,你不能直接侦听响应式对象的属性值,例如:
const obj = reactive({
count: 0 })
// 错误,因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
console.log(`count is: ${
count}`)
})
这里需要用一个返回该属性的 getter 函数:
// 提供一个 getter 函数
watch(
() => obj.count,
(count) => {
console.log(`count is: ${
count}`)
}
)
深层侦听器
直接给 watch() 传入一个响应式对象,会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发:
const obj = reactive({
count: 0 })
watch(obj, (newValue, oldValue) => {
// 在嵌套的属性变更时触发
// 注意:`newValue` 此处和 `oldValue` 是相等的
// 因为它们是同一个对象!
})
obj.count++
相比之下,一个返回响应式对象的 getter 函数,只有在返回不同的对象时,才会触发回调:
watch(
() => state.someObject,
() => {
// 仅当 state.someObject 被替换时触发
}
)
你也可以给上面这个例子显式地加上 deep 选项,强制转成深层侦听器:
watch(
() => state.someObject,
(newValue, oldValue) => {
// 注意:`newValue` 此处和 `oldValue` 是相等的
// *除非* state.someObject 被整个替换了
},
{
deep: true }
)
深度侦听需要遍历被侦听对象中的所有嵌套的属性,当用于大型数据结构时,开销很大。因此请只在必要时才使用它,并且要留意性能。
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 已经没有用了,但是作为依赖还是会触发函数)
watch VS watchEffect
watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:
-
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。
-
watchEffect,则会在副作用发生期间追踪依赖。它会在同步执行过程中,自动追踪所有能访问到的响应式属性。这更方便,而且代码往往更简洁,但有时其响应性依赖关系会不那么明确。
什么时候用什么?
推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发,也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单,依赖源和逻辑强相关的场景(或者懒惰的场景 )。
回调的触发时机
当你更改了响应式状态,它可能会同时触发 Vue 组件更新和侦听器回调。
默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: ‘post’ 选项:
watch(source, callback, {
flush: 'post'
})
watchEffect(callback, {
flush: 'post'
})
后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect():
import {
watchPostEffect } from 'vue'
watchPostEffect(() => {
/* 在 Vue 更新后执行 */
})
停止侦听器
在 setup() 或
<script setup>
import {
watchEffect } from 'vue'
// 它会自动停止
watchEffect(() => {
})
// ...这个则不会!
setTimeout(() => {
watchEffect(() => {
})
}, 100)
</script>
要手动停止一个侦听器,请调用 watch 或 watchEffect 返回的函数:
const unwatch = watchEffect(() => {
})
// ...当该侦听器不再需要时
unwatch()
注意,需要异步创建侦听器的情况很少,请尽可能选择同步创建。如果需要等待一些异步数据,你可以使用条件式的侦听逻辑:
// 需要异步请求得到的数据
const data = ref(null)
watchEffect(() => {
if (data.value) {
// 数据加载后执行某些操作...
}
})