fix(reactivity): fix dep memory leak

Co-Authored-By: skirtle <[email protected]>

vuejs#7827

Author: johnsoncodehk

packages/reactivity/__tests__/effect.spec.ts

@@ -11,7 +11,12 @@ import {
   readonly,
   ReactiveEffectRunner
 } from '../src/index'
-import { ITERATE_KEY, pauseScheduling, resetScheduling } from '../src/effect'
+import {
+  ITERATE_KEY,
+  getDepFromReactive,
+  pauseScheduling,
+  resetScheduling
+} from '../src/effect'
 
 describe('reactivity/effect', () => {
   it('should run the passed function once (wrapped by a effect)', () => {
@@ -993,4 +998,68 @@ describe('reactivity/effect', () => {
     resetScheduling()
     expect(counterSpy).toHaveBeenCalledTimes(1)
   })
+
+  describe('empty dep cleanup', () => {
+    it('should remove the dep when the effect is stopped', () => {
+      const obj = reactive({ prop: 1 })
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      const runner = effect(() => obj.prop)
+      const dep = getDepFromReactive(toRaw(obj), 'prop')
+      expect(dep).toHaveLength(1)
+      obj.prop = 2
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(1)
+      stop(runner)
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      obj.prop = 3
+      runner()
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+    })
+
+    it('should only remove the dep when the last effect is stopped', () => {
+      const obj = reactive({ prop: 1 })
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      const runner1 = effect(() => obj.prop)
+      const dep = getDepFromReactive(toRaw(obj), 'prop')
+      expect(dep).toHaveLength(1)
+      const runner2 = effect(() => obj.prop)
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(2)
+      obj.prop = 2
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(2)
+      stop(runner1)
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(1)
+      obj.prop = 3
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(1)
+      stop(runner2)
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      obj.prop = 4
+      runner1()
+      runner2()
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+    })
+
+    it('should remove the dep when it is no longer used by the effect', () => {
+      const obj = reactive<{ a: number; b: number; c: 'a' | 'b' }>({
+        a: 1,
+        b: 2,
+        c: 'a'
+      })
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      effect(() => obj[obj.c])
+      const depC = getDepFromReactive(toRaw(obj), 'c')
+      expect(getDepFromReactive(toRaw(obj), 'a')).toHaveLength(1)
+      expect(getDepFromReactive(toRaw(obj), 'b')).toBeUndefined()
+      expect(depC).toHaveLength(1)
+      obj.c = 'b'
+      obj.a = 4
+      expect(getDepFromReactive(toRaw(obj), 'a')).toBeUndefined()
+      expect(getDepFromReactive(toRaw(obj), 'b')).toHaveLength(1)
+      expect(getDepFromReactive(toRaw(obj), 'c')).toBe(depC)
+      expect(depC).toHaveLength(1)
+    })
+  })
 })

packages/reactivity/src/dep.ts

@@ -2,11 +2,16 @@ import type { ReactiveEffect } from './effect'
 import type { ComputedRefImpl } from './computed'
 
 export type Dep = Map<ReactiveEffect, number> & {
+  cleanup: () => void
   computed?: ComputedRefImpl<any>
 }
 
-export const createDep = (computed?: ComputedRefImpl<any>): Dep => {
-  const dep: Dep = new Map()
+export const createDep = (
+  cleanup: () => void,
+  computed?: ComputedRefImpl<any>
+): Dep => {
+  const dep: Dep = new Map() as Dep
+  dep.cleanup = cleanup
   dep.computed = computed
   return dep
 }

packages/reactivity/src/effect.ts

@@ -144,6 +144,9 @@ function cleanupDepEffect(dep: Dep, effect: ReactiveEffect) {
   const trackId = dep.get(effect)
   if (trackId !== undefined && effect._trackId !== trackId) {
     dep.delete(effect)
+    if (dep.size === 0) {
+      dep.cleanup()
+    }
   }
 }
 
@@ -275,7 +278,7 @@ export function track(target: object, type: TrackOpTypes, key: unknown) {
     }
     let dep = depsMap.get(key)
     if (!dep) {
-      depsMap.set(key, (dep = createDep()))
+      depsMap.set(key, (dep = createDep(() => depsMap!.delete(key))))
     }
     if (__DEV__) {
       trackEffect(activeEffect, dep, {

packages/reactivity/src/ref.ts

@@ -46,6 +46,7 @@ export function trackRefValue(ref: RefBase<any>) {
         activeEffect,
         ref.dep ||
           (ref.dep = createDep(
+            () => (ref.dep = undefined),
             ref instanceof ComputedRefImpl ? ref : undefined
           )),
         {
@@ -59,6 +60,7 @@ export function trackRefValue(ref: RefBase<any>) {
         activeEffect,
         ref.dep ||
           (ref.dep = createDep(
+            () => (ref.dep = undefined),
             ref instanceof ComputedRefImpl ? ref : undefined
           ))
       )