Reactivity Basics & Composition API (ref & reactive)

Reactivity functions serve different use cases:

• ref(): Can wrap any value (primitives like strings, numbers, booleans, or objects). In JavaScript scripts, you must access the value using .value (e.g. count.value++). Inside <template> layout, it is automatically unwrapped, so no .value is needed.
• reactive(): Can only wrap object types (objects, arrays). It does not use .value, but you cannot reassign the root object reference without losing reactivity.
• <script setup>: Syntactic sugar that simplifies using the Composition API, automatically exposing declared variables to the template.

Let's check how to write a component using the Composition API with <script setup>:

<template>
  <div class="profile">
    <h3>User: {{ profile.name }}</h3>
    <p>Age: {{ profile.age }}</p>
    <button @click="birthday">Birthday</button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// ref for a simple boolean flag
const isActive = ref(true);

// reactive for an object
const profile = reactive({
  name: 'Balaji Nayak',
  age: 22
});

function birthday() {
  // Access and modify properties directly
  profile.age++;
}
</script>