watchEffet包含一个形参,是个函数,下面是例子

• watchEffect((onInvalidate)=>xx)
• 这个形参是个函数
• 下面的代码,设置了一个按钮,点击按钮使用setTimeOut模拟请求,打印'网络请求成功'

setup() {
  const age = ref(25)
  const name = ref('ww')
  const addAge = () => age.value++
  const changeName = () => name.value = 'wwwwwww'
  //watchEffect会在加载时先执行一次
  watchEffect((onInvalidate) => {
    const timer = setTimeout(()=>{
      console.log('网络请求成功')
    },1000)
    //onInvalidate函数,个人理解,监测到变化时,先执行onInvalidate,再执行timer
    onInvalidate(()=>{
      clearTimeout(timer)
    })
    console.log(age.value)
  })
  return {
    age, name, addAge, changeName
  }

结果

页面首次加载时,watchEffect会先执行一次,因此打印出了延时器的内容

当我点击一次按钮,是watchEffect的依赖变化时,延时器继续被执行

当我快速多次点击按钮式,延时器的打印却没有被执行

• 说明,在我多次点击按钮时,watchEffect的依赖发生了变化,执行了onInvalidate,取消了timer.timer设定为1秒后打印,在还没来得及打印前,执行了onInvalidate中的clearTimeout(timer)函数

结论

watchEffect在监测到依赖时,会先执行他的形参onInvalidate函数,再执行作用域的函数