Working with Reactive Data (ref)

In Vue, data becomes reactive when you use the ref() function. Reactive data means that when the value changes, the UI updates automatically.

To create reactive data, import ref and define a variable inside the <script setup> section.

// Vue
<script setup>
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <p>{{ count }}</p>
</template>

The value inside ref() is wrapped, so to update it in JavaScript, you use .value.

// JS
count.value = count.value + 1;

When the value changes, Vue automatically updates the UI.

Example with a button:

// Vue
<script setup>
import { ref } from "vue";

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <p>{{ count }}</p>
  <button @click="increment">Increase</button>
</template>

Each time the button is clicked, the value updates and the UI re-renders.

Reactive data is the foundation of Vue. It allows you to build interfaces that respond automatically to changes in your application state.