Why Ref and reactive in Composition API in Vue? - Purpose & Use Cases

The Big Idea

Discover how Vue's ref and reactive save you from endless manual updates and bugs!

The Scenario

Imagine you have a simple webpage where you want to update a number or an object's properties and show those changes instantly on the screen.

Without special tools, you have to write extra code to watch for changes and update the page manually every time something changes.

The Problem

Manually tracking changes is tiring and easy to forget.

You might miss updating some parts, causing the page to show old or wrong data.

This makes your code messy and hard to fix.

The Solution

Vue's ref and reactive automatically watch your data.

When data changes, Vue updates the page for you instantly.

This keeps your code clean and your app fast and reliable.

Before vs After

✗ Before

let count = 0;
document.getElementById('count').innerText = count;
// Need to manually update DOM every time count changes

✓ After

import { ref } from 'vue';
const count = ref(0);
// Vue updates DOM automatically when count.value changes

What It Enables

You can build interactive apps that update instantly without writing extra code to track changes.

Real Life Example

Think of a shopping cart where the total price updates immediately when you add or remove items, without refreshing the page.

Key Takeaways

Ref and reactive help Vue watch your data for changes.

They keep your UI in sync automatically.

This makes your code simpler and your app smoother.