Managing State with ref and reactive

In Vue, application state represents the data that controls your interface. Vue provides ref() and reactive() to create and manage this state.

Use ref() for simple values like numbers or strings.

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

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

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

Use reactive() for objects with multiple properties.

<script setup>
import { reactive } from "vue";

const user = reactive({
  name: "John",
  age: 25
});
</script>

<template>
  <p>{{ user.name }}</p>
  <p>{{ user.age }}</p>
</template>

To update values, use .value with ref() and direct property access with reactive().

count.value++;
user.name = "Emily";

Both ref() and reactive() create reactive state that automatically updates the UI when data changes.