fix(reactivity): onCleanup also needs to be cleaned (#8655)

shengxinjing · web-flow · commit 73fd810eebdd · 2023-11-10T16:47:08.000+08:00
close #5151 close #7695
diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts
@@ -1205,4 +1205,39 @@ describe('api: watch', () => {
     expect(countWE).toBe(3)
     expect(countW).toBe(2)
   })
+
+  // #5151
+  test('OnCleanup also needs to be cleaned，', async () => {
+    const spy1 = vi.fn()
+    const spy2 = vi.fn()
+    const num = ref(0)
+
+    watch(num, (value, oldValue, onCleanup) => {
+      if (value > 1) {
+        return
+      }
+      spy1()
+      onCleanup(() => {
+        // OnCleanup also needs to be cleaned
+        spy2()
+      })
+    })
+
+    num.value++
+    await nextTick()
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(0)
+
+    num.value++
+    await nextTick()
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(1)
+
+    num.value++
+    await nextTick()
+    // would not be calld when value>1
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts
@@ -273,10 +273,11 @@ function doWatch(
     getter = () => traverse(baseGetter())
   }
 
-  let cleanup: () => void
+  let cleanup: (() => void) | undefined
   let onCleanup: OnCleanup = (fn: () => void) => {
     cleanup = effect.onStop = () => {
       callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
+      cleanup = effect.onStop = undefined
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -273,10 +273,11 @@ function doWatch(`
`273`	`273`	`getter = () => traverse(baseGetter())`
`274`	`274`	`}`
`275`	`275`
`276`		`- let cleanup: () => void`
	`276`	`+ let cleanup: (() => void) \| undefined`
`277`	`277`	`let onCleanup: OnCleanup = (fn: () => void) => {`
`278`	`278`	`cleanup = effect.onStop = () => {`
`279`	`279`	`callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)`
	`280`	`+ cleanup = effect.onStop = undefined`
`280`	`281`	`}`
`281`	`282`	`}`
`282`	`283`