fix(useInfiniteScroll): stop watch when unmounted (#4110)

zyyv · web-flow · commit f30ccf0819e4 · 2024-09-16T08:43:33.000Z
diff --git a/packages/core/useInfiniteScroll/index.ts b/packages/core/useInfiniteScroll/index.ts
@@ -1,5 +1,5 @@
 import type { Awaitable, MaybeRefOrGetter } from '@vueuse/shared'
-import { toValue } from '@vueuse/shared'
+import { toValue, tryOnUnmounted } from '@vueuse/shared'
 import type { UnwrapNestedRefs } from 'vue-demi'
 import { computed, nextTick, reactive, ref, watch } from 'vue-demi'
 import { useElementVisibility } from '../useElementVisibility'
@@ -101,12 +101,14 @@ export function useInfiniteScroll<T extends InfiniteScrollElement>(
     }
   }
 
-  watch(
+  const stop = watch(
     () => [state.arrivedState[direction], isElementVisible.value],
     checkAndLoad,
     { immediate: true },
   )
 
+  tryOnUnmounted(stop)
+
   return {
     isLoading,
     reset() {
