Why Reactive data with ref in Vue? - Purpose & Use Cases

The Big Idea

Discover how a tiny change in your code can make your app update itself like magic!

The Scenario

Imagine you have a simple counter on a webpage. Every time you click a button, you want the number to update on the screen.

Without reactive data, you must find the number element in the page and change its text manually each time the button is clicked.

The Problem

Manually updating the page is slow and easy to forget. If you miss updating the number somewhere, the page shows wrong information.

Also, if the number is used in many places, you have to update all of them yourself, which is tiring and error-prone.

The Solution

Using ref in Vue makes the number reactive. When the number changes, Vue automatically updates all places where it is shown.

This means you only change the number once in your code, and the page updates itself perfectly.

Before vs After

✗ Before

let count = 0;
button.onclick = () => {
  count++;
  document.getElementById('count').textContent = count;
};

✓ After

import { ref } from 'vue';
const count = ref(0);
function increment() {
  count.value++;
}

What It Enables

You can build interactive apps where the UI always stays in sync with your data without extra work.

Real Life Example

Think of a shopping cart total that updates instantly when you add or remove items, without needing to refresh the page or write extra update code.

Key Takeaways

Manual updates are slow and error-prone.

ref makes data reactive and UI automatic.

This leads to simpler, more reliable interactive apps.