前言
watchEffect
,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。换句话说:
watchEffect
相当于将watch
的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。不同于watch
,watchEffect
的回调函数会被立即执行(即{ immediate: true }
)
watchEffect的副作用
什么是副作用(
side effect
),简单的说副作用就是执行某种操作,如对外部可变数据或变量的修改,外部接口的调用等。watchEffect
的回调函数就是一个副作用函数,因为我们使用watchEffect
就是侦听到依赖的变化后执行某些操作。当执行副作用函数时,它势必会对系统带来一些影响,如在副作用函数里执行了一个定时器
setInterval
,因此我们必须处理副作用。Vue3
的watchEffect
侦听副作用传入的函数可以接收一个onInvalidate
函数作为入参,用来注册清理失效时的回调。当以下情况发生时,这个失效回调会被触发:
- 副作用即将重新执行时(即依赖的值改变)
- 侦听器被停止 (通过显示调用返回值停止侦听,或组件被卸载时隐式调用了停止侦听)
import { watchEffect, ref } from 'vue'
const count = ref(0)
watchEffect((onInvalidate) => {
console.log(count.value)
onInvalidate(() => {
console.log('执行了onInvalidate')
})
})
setTimeout(()=> {
count.value++
}, 1000)
上述代码打印的顺序为:
0
->执行了onInvalidate,最后执行
->1
分析:初始化时先打印