Vue Lifecycle and Cleanup

Welcome back! In the last lesson, you learned how to use Vue Router to create a multi-page application and saw how composables help keep your logic organized and reusable. As your Vue apps grow, you will often need to manage things that happen at specific times in a component’s life — like fetching data when a component appears or cleaning up timers and listeners when it disappears. This is where understanding the Vue component lifecycle becomes essential.

Lifecycle hooks are special functions in Vue that let you run code at key moments in a component’s existence. They help you control when to set up data, start side effects, or clean up resources. This is especially important when you use composables because you want to make sure your logic works smoothly and does not cause problems like memory leaks or stale data.

In this lesson, you will explore how the Vue lifecycle works, how to use lifecycle hooks inside composables, and why cleanup is so important. You will see real code examples, including the useLocalStorage composable, to make these ideas concrete. By the end, you will know how to manage initialization and cleanup in your own Vue apps, making them more reliable and efficient.

Every Vue component goes through a series of phases from the moment it is created until it is removed from the page. These phases are called the component lifecycle. The main phases are mounting, updating, and unmounting.

When a component is mounting, it is being created and added to the DOM. This is the perfect time to fetch data, set up event listeners, or initialize state. After mounting, the component may go through several updates as its data or props change. Finally, when the component is no longer needed, it is unmounted and removed from the DOM. This is when you should clean up any side effects, like stopping timers or removing event listeners.

Understanding these phases helps you write code that runs at the right time. For example, you do not want to fetch data before the component is ready or leave a timer running after the component is gone. Vue provides lifecycle hooks so you can run code at each of these important moments.

Vue’s Composition API gives you access to lifecycle hooks like onMounted and onUnmounted even inside composables. This means you can write reusable logic that knows when a component is created or destroyed and act accordingly.

The onMounted hook lets you run code after the component is added to the DOM. For example, you might want to load data from localStorage or start a network request. The onUnmounted hook is used to clean up when the component is about to be removed. This is where you stop timers, remove event listeners, or cancel network requests.

Here is a simple example of using onMounted in a composable:

import { ref, onMounted, onUnmounted } from 'vue';

export function useGreeting() {
  const message = ref('');

  onMounted(() => {
    message.value = 'Hello, Vue!';
  });
  
  onUnmounted(() => {
    console.log("Component unmounted, cleaning up data");
    message.value = "";
  });

  return { message };
}

When you use this composable in a component, the message will be set to "Hello, Vue!" as soon as the component is mounted. If you need to clean up something, you could add an onUnmounted hook as well.

These hooks make your composables more powerful and safe because they can manage their own setup and cleanup without relying on the component to do it.

Let’s look at a real example from your project: the useLocalStorage composable. This composable helps you keep a piece of state in sync with the browser’s localStorage, so your data is saved even if the user refreshes the page.

Here is the code:

import { ref, watch, onMounted } from 'vue';

export function useLocalStorage(key, dataRef) {
  // onMounted is a lifecycle hook. It runs after the component is mounted to the DOM.
  // It's perfect for fetching initial data.
  onMounted(() => {
    const storedValue = localStorage.getItem(key);
    if (storedValue) {
      // If data exists in localStorage, update the ref.
      dataRef.value = JSON.parse(storedValue);
    }
  });

  // watch will run whenever the dataRef changes.
  // The Composition API automatically cleans up this watcher when the
  // component that uses this composable is unmounted.
  watch(dataRef, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue));
  }, { deep: true }); // 'deep' is needed to watch for changes inside objects/arrays.
}

When you use this composable, it first checks localStorage for existing data as soon as the component is mounted. If it finds data, it updates your state. Then, it sets up a watcher that saves your data to localStorage every time it changes. Thanks to Vue’s lifecycle management, the watcher is cleaned up automatically when the component is unmounted, so you do not have to worry about memory leaks.

For example, if you use this composable in your to-do app, your tasks will be saved and restored automatically:

User adds a new task: "Buy groceries"
→ localStorage is updated with the new list of tasks

User refreshes the page
→ onMounted loads the tasks from localStorage

This makes your app feel more reliable and user-friendly, and you do not have to write extra code to manage setup or cleanup.

To keep your Vue apps healthy and efficient, always use lifecycle hooks to manage setup and cleanup. Use onMounted to initialize data or start side effects, and use onUnmounted to clean up anything that will not be handled automatically by Vue, such as event listeners, timers, or manual subscriptions.

When using watchers, remember that Vue will clean them up for you if they are created inside a composable or a component’s setup function. However, if you use third-party libraries or browser APIs that do not clean up automatically, always add cleanup logic in onUnmounted.

A common pitfall is forgetting to remove event listeners or stop intervals, which can lead to memory leaks and slow down your app over time. Always ask yourself: “Does this side effect need to be cleaned up when the component goes away?” If the answer is yes, use onUnmounted.

By following these practices, you will write Vue code that is robust, easy to maintain, and free from hidden bugs.

In this lesson, you learned how the Vue component lifecycle works and why it is important for managing state and side effects in your app. You saw how to use lifecycle hooks like onMounted and onUnmounted inside composables, and how Vue’s watch function works together with these hooks to keep your app’s data and side effects in sync. You also walked through a real example with the useLocalStorage composable, seeing how it uses lifecycle hooks to load and save data safely.

You are now ready to put these ideas into practice. In the next exercises, you will work with lifecycle hooks and cleanup in your own code, making your Vue apps more reliable and efficient. Keep up the great work — each lesson brings you closer to mastering modern Vue development!