Vue3 watchEffect(一)

483 阅读1分钟

image.png

  • 它会立即执行,会响应式的追踪它的依赖,并在依赖改变时再次执行。

image.png

  • 当watchEffect被调用,它的监听器会被与组件的生命周期链接,而且会被停止在组件卸载的时候。(应该就是会告诉我们这个监听是会被停掉的,不用担心它的副作用)

image.png

  • 它提供了一个stop函数,可以用于你主动停止watchEffect

image.png

image.png

  • 有时候你需要在监听的数据改变时做一些其他的操作,比如进行防抖时要取消一些东西,就可以使用这个onInvalidat失效
  • 它会在数据更改之后,监听函数其他内容执行之前执行
  • 定义失效函数的方式,可以在参数中获取到一个失效函数,失效函数中接收一个参数为一个回调函数,在这里面写就可以了。
  • 为什么在监听函数其他内容执行之前执行?如果监听函数是一个异步函数,里面有异步操作,那么就不能对后面的操作进行一个拦截??????????
  • 失效函数在stop函数执行之前也会执行一次