Understanding the Vue 3 Composition API

For many developers coming from Vue 2, the Composition API is the part of Vue 3 that feels the most intimidating. It looks different. It reads differently. And at first glance, it can feel unnecessary.

This article is not here to convince you that the Composition API is better. It’s here to help you understand what it actually is, why it exists, and how to approach it without pressure.

---

What the Composition API Really Is

At its core, the Composition API is a way to organise component logic by concern, not by option.

In Vue 2, logic is split across data, methods, computed, and watchers. That works well until components grow and related logic ends up scattered across the file.

The Composition API allows you to group logic that belongs together in one place. That’s the entire idea.

---

What setup() Actually Does

In Vue 3, setup() is where your component’s logic lives when using the Composition API.

It runs before the component is created and gives you access to props, state, and lifecycle hooks in a more direct way.

Think of setup() as the place where you prepare everything your component needs before it renders.

---

ref vs reactive (Simply Explained)

This is where many people get stuck.

• Use ref for single values like numbers, strings, or booleans
• Use reactive for objects

The key thing to remember is that ref wraps a value, so you access it using .value in JavaScript. In templates, Vue unwraps it automatically.

It feels strange at first. Then it becomes normal.

---

Lifecycle Hooks in Vue 3

Lifecycle hooks still exist in Vue 3, but they’re imported and used directly.

Instead of mounted(), you now use onMounted().

This makes lifecycle logic more explicit and easier to reuse across components.

---

You Don’t Have to Rewrite Everything

One important thing to remember is this:
You can still use the Options API in Vue 3.

The Composition API is optional. You can adopt it gradually, component by component, as it makes sense.

There is no prize for suffering through a forced rewrite.

---

The Real Benefit

The real benefit of the Composition API is not less code or clever syntax. It’s clarity.

It helps you write components that are easier to understand, easier to refactor, and easier to scale over time.

---

Final Thoughts

The Composition API is not something you need to master overnight. It’s something you grow into.

Take it slow. Experiment. Refactor small pieces. Let it make sense in context.

In the next article, I’ll walk through refactoring a Vue 2 component to Vue 3, step by step.