Detailed explanation of Vue3 app.onUnmount() function

Vue3 全局 APIVue3 global API

app.onUnmount()is an API used to add a callback function that is executed when a component is unmounted.

app.onUnmount()is a very useful API in Vue 3. It helps developers perform necessary cleanup operations when a component is unmounted, avoiding memory leaks and wasted resources. By using it properly,app.onUnmount()can improve the stability and performance of an application.

1. What isapp.onUnmount()？

app.onUnmount()is a global API provided by Vue 3. It allows developers to add a callback function to the application instance, and this callback function is automatically executed when the component is unmounted. This feature is especially suitable for cleaning up resources, canceling event listeners, or performing other operations that need to be handled when the component is unmounted.

2. Basic syntax

Example

app.onUnmount(() => {
  // Write the code that needs to be executed when the component is unmounted here
});

app.onUnmount()accepts a callback function as a parameter, and this function is automatically called when the component is unmounted.

3. Use cases

3.1 Clean up resources

In a component, we may create some resources that need to be cleaned up when the component is unmounted, such as timers, WebSocket connections, or instances of third-party libraries. Usingapp.onUnmount()ensures that these resources are properly cleaned up when the component is unmounted.

Example

app.onUnmount(() => {
  clearInterval(timerID); // Clear the timer
  webSocket.close(); // Close the WebSocket connection
});

3.2 Cancel event listeners

If global event listeners are registered in a component, they should be removed when the component is unmounted to avoid memory leaks.

Example

app.onUnmount(() => {
  window.removeEventListener('resize', handleResize); // Remove the window resize event listener
});

3.3 Cancel subscriptions

In a component, we may subscribe to some data sources or event streams, such as RxJS Observables. When the component is unmounted, these subscriptions should be canceled to avoid unnecessary resource consumption.

Example

app.onUnmount(() => {
  subscription.unsubscribe(); // Cancel subscription
});

4. Code example

Below is a complete code example showing how to use theapp.onUnmount()function in Vue 3.

Example

import { createApp } from 'vue';

const app = createApp({
  setup() {
    const timerID = setInterval(() => {
      console.log('Timer is running...');
    }, 1000);

    app.onUnmount(() => {
      clearInterval(timerID); // Clear the timer when the component is unmounted
      console.log('Timer has been cleared.');
    });

    return {};
  }
});

app.mount('#app');

In this example, we created a timer that outputs "Timer is running..." every second. When the component is unmounted, the timer is cleared and "Timer has been cleared." is output.

5. Notes

  • app.onUnmount()is global, meaning it triggers when any component is unmounted. If multiple components require different unmount logic, you may need to use theonUnmountedhook instead.
  • Make sure to only perform necessary cleanup operations in the callback function to avoid additional performance overhead.
Other extensions