Subscribe on changes!

`onScopeDispose` will not be called in `runWithContext`

avatar
Jul 15th 2023

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/onscopedispose-will-not-be-called-in-runwithcontext?file=src%2Fmain.ts&terminal=dev

Steps to reproduce

Some libraries require cleaning up subscriptions when a component or app unmounts. However, if we execute onScopeDispose() within app.runWithContext(), a warning message will be displayed.

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.runWithContext(() => {
  onScopeDispose(() => {
    console.log('run `onScopeDispose()`')
  })
})

app.mount('#app')

// unmount application
app.unmount()

What is expected?

When we call createApp(), it will create an application-level effect scope. This means that when we unmount the application, the onScopeDispose() function will be automatically invoked.

What is actually happening?

Warn message

[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated with.

System Info

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 151.16 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Firefox: 114.0.2
    Safari: 14.1.2
    Safari Technology Preview: 15.4