Why Composable with lifecycle hooks in Vue? - Purpose & Use Cases

The Big Idea

Discover how to write setup code once and reuse it everywhere without headaches!

The Scenario

Imagine you have multiple Vue components that need to run similar setup code when they start, like fetching data or setting timers. You copy and paste this code into each component's lifecycle hooks.

The Problem

Copying code everywhere makes your app hard to maintain. If you want to change the logic, you must update every component. It's easy to forget one, causing bugs. Also, mixing setup code inside components clutters them and hides the real purpose.

The Solution

Composable functions with lifecycle hooks let you write reusable setup logic once. You call these composables inside components, and they automatically connect to the component's lifecycle. This keeps your code clean, DRY, and easy to update.

Before vs After

✗ Before

export default { mounted() { this.startTimer() }, methods: { startTimer() { /* timer logic */ } } }

✓ After

import { onMounted } from 'vue';

function useTimer() { onMounted(() => { /* timer logic */ }) }

export default { setup() { useTimer() } }

What It Enables

You can share complex setup logic across components effortlessly, making your app easier to build and maintain.

Real Life Example

Imagine a chat app where many components need to connect to a WebSocket when they mount. Using a composable with lifecycle hooks, you write the connection logic once and reuse it everywhere.

Key Takeaways

Manual lifecycle code copying leads to bugs and clutter.

Composables with lifecycle hooks let you reuse setup logic cleanly.

This approach improves maintainability and clarity in Vue apps.