Why reactivity is Vue's core concept

Introduction

Reactivity lets Vue automatically update the screen when data changes. This makes building interactive apps easier and faster.

When you want the user interface to change automatically as data changes.

When building forms that update live as users type.

When showing live data like counters or timers.

When you want to keep your code simple and avoid manual updates.

When creating apps that respond instantly to user actions.

Syntax

Vue

import { ref, reactive } from 'vue';

const count = ref(0);
const state = reactive({ name: 'Vue' });

ref creates a reactive single value.

reactive creates a reactive object with multiple properties.

Examples

This shows a reactive number that updates when changed.

Vue

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

This shows a reactive object where changing a property updates the UI.

Vue

import { reactive } from 'vue';
const state = reactive({ name: 'Vue', version: 3 });
state.version = 4;

Sample Program

This Vue component shows a number and a button. Clicking the button increases the number automatically on screen because of reactivity.

Vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Add 1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
  count.value++;
}
</script>

Important Notes

Reactivity helps keep your UI and data in sync without extra code.

Always use ref or reactive to make data reactive in Vue.

Access reactive values with .value when using ref.

Summary

Reactivity automatically updates the UI when data changes.

Use ref for single reactive values and reactive for objects.

This makes building interactive apps simpler and cleaner.