fix(useResizeObserver): clear directive when component is unmounted(#…

…5001)
vueuse · kalu5 · Nov 14, 2025 · Nov 14, 2025 · Nov 14, 2025 · Nov 14, 2025
commit c8ae60f38f813e49a37149b38653435e572b956c
diff --git a/packages/core/useResizeObserver/directive.test.ts b/packages/core/useResizeObserver/directive.test.ts
@@ -2,7 +2,7 @@ import type { VueWrapper } from '@vue/test-utils'
 import type { UseResizeObserverOptions } from './index'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { vResizeObserver } from './directive'
 
 const App = defineComponent({
@@ -27,6 +27,15 @@ const App = defineComponent({
 describe('vResizeObserver', () => {
   let onResizeObserver = vi.fn()
   let wrapper: VueWrapper<any>
+  globalThis.ResizeObserver = vi.fn().mockImplementation((callback) => {
+    return {
+      observe: vi.fn((target) => {
+        callback([{ contentRect: { width: target.offsetWidth || 0 } }], this)
+      }),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
+    }
+  })
 
   describe('given no options', () => {
     beforeEach(() => {
@@ -43,9 +52,30 @@ describe('vResizeObserver', () => {
       })
     })
 
+    const observer = new ResizeObserver(onResizeObserver)
+
     it('should be defined', () => {
       expect(wrapper).toBeDefined()
     })
+
+    it('should clear directive when component is unmounted', async () => {
+      const element = wrapper.element.querySelector('div')
+      if (element) {
+        observer.observe(element)
+        element.style.width = '200px'
+        await new Promise(resolve => setTimeout(resolve, 100))
+        expect(onResizeObserver).toBeCalledTimes(1)
+
+        observer.disconnect()
+        wrapper.unmount()
+        onResizeObserver.mockClear()
+        await nextTick()
+
+        element.style.width = '300px'
+        await new Promise(resolve => setTimeout(resolve, 100))
+        expect(onResizeObserver).toBeCalledTimes(0)
+      }
+    })
   })
 
   describe('given options', () => {
@@ -67,8 +97,29 @@ describe('vResizeObserver', () => {
       })
     })
 
+    const observer = new ResizeObserver(onResizeObserver)
+
     it('should be defined', () => {
       expect(wrapper).toBeDefined()
     })
+
+    it('should clear directive when component is unmounted', async () => {
+      const element = wrapper.element.querySelector('div')
+      if (element) {
+        observer.observe(element)
+        element.style.width = '200px'
+        await new Promise(resolve => setTimeout(resolve, 100))
+        expect(onResizeObserver).toBeCalledTimes(1)
+
+        observer.disconnect()
+        wrapper.unmount()
+        onResizeObserver.mockClear()
+        await nextTick()
+
+        element.style.width = '300px'
+        await new Promise(resolve => setTimeout(resolve, 100))
+        expect(onResizeObserver).toBeCalledTimes(0)
+      }
+    })
   })
 })
diff --git a/packages/core/useResizeObserver/directive.ts b/packages/core/useResizeObserver/directive.ts
@@ -1,19 +1,30 @@
 import type { ResizeObserverCallback, UseResizeObserverOptions } from '@vueuse/core'
-import type { ObjectDirective } from 'vue'
+import type { EffectScope, ObjectDirective } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
+import { effectScope } from 'vue'
 
 type BindingValueFunction = ResizeObserverCallback
 
 type BindingValueArray = [BindingValueFunction, UseResizeObserverOptions]
 
+const vResizeObserverScopes = new WeakMap<HTMLElement, EffectScope>()
+
 export const vResizeObserver: ObjectDirective<
   HTMLElement,
   BindingValueFunction | BindingValueArray
 > = {
   mounted(el, binding) {
-    if (typeof binding.value === 'function')
-      useResizeObserver(el, binding.value)
-    else
-      useResizeObserver(el, ...binding.value)
+    const scope = vResizeObserverScopes.get(el) ?? effectScope()
+    vResizeObserverScopes.set(el, scope)
+    scope.run(() => {
+      if (typeof binding.value === 'function')
+        useResizeObserver(el, binding.value)
+      else
+        useResizeObserver(el, ...binding.value)
+    })
+  },
+  unmounted(el) {
+    vResizeObserverScopes.get(el)?.stop()
+    vResizeObserverScopes.delete(el)
   },
 }