Automated Side-Effect Cleanup with onScopeDispose

Snippet

Automated Side-Effect Cleanup with onScopeDispose

onScopeDispose is a lifecycle hook that executes when the current reactive scope is destroyed. It is ideal for cleaning up manual subscriptions or timers without being tethered to a specific component instance.

snippet.js
javascript
import { onScopeDispose } from 'vue';
 
export function useExternalService(service) {
  service.connect();
 
  onScopeDispose(() => {
    service.disconnect();
  });
}

vue

Breakdown

import { onScopeDispose } from 'vue';

Imports the hook that manages scope-level cleanup.

onScopeDispose(() => { ... });

Registers a callback to run when the effect scope or component is unmounted.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Automated Side-Effect Cleanup with onScopeDispose

Related