vue3 watchEffect onInvalidate 解析

/**
     *  第一遍调用 getter，cleanUp 没有值，不会执行，然后调用watchEffect(source) 的source，source里面为cleanUp 赋值，然后输出 watchEffect
     * 
     *  第二遍调用 getter，cleanUp 有值，cleanUp 的值就是onInvalidate传入的回调，先执行cleanUp, 并且cleanUp 通过闭包，保存了 watchEffect 上一次的作用域信息，可以用来清除上一次的一些信息(当watchEffect第一次请求的响应晚于第二次响应时，第一次的结果会覆盖第二次，产生一些错误，就可以在onInvalidate 里面清除上一次的信息)
     * 
     * 每次调用 effect，都会注册cleanup, 当effect下一次执行前，把上一次注册的cleanup函数给执行(cleanup里面保存了上一次effect中的变量)
     * */
    let cleanUp
    let uid = 1
    const getter = (cb) => {
        if (cleanUp) {
          cleanUp()
        }
        cb(onInvalidate)
    }
    const onInvalidate = (cb) => {
      cleanUp = () => {
        cb()
      }
    }
    function watchEffect(onInvalidate) {
      let token = ++uid 
      onInvalidate(() => {
        // 闭包，回调函数里面还能使用函数里面的变量
        console.log('onInvalidate', token)
      })
      console.log('watchEffect')
    }
    getter(watchEffect)
    getter(watchEffect)