Understanding Reactive Data in Vue 3: Using ref and reactive

Vue 3 provides a reactive data system that automatically updates the view when underlying data changes. The article starts with a definition of reactive data and why it is essential for building interactive interfaces.

Responsive data in Vue.js means that when a data property changes, the associated view updates automatically. Vue converts declared data properties into reactive references, enabling automatic synchronization between data and the DOM.

An initial example shows a simple template with a variable a and a button that increments it. The console logs confirm that the variable changes, but the displayed value does not update because a is not reactive.

<template>
  <div>数据a:{{ a }}</div>
  <button @click="add">+1</button>
</template>
<script setup>
let a = 1;
const add = () => {
  a++;
  console.log(a);
};
</script>
<style lang="css" scoped></style>

To make a reactive, Vue offers the ref function. Using ref , the value is wrapped in an object whose .value property holds the actual data.

<template>
  <div>数据a:{{ a }}</div>
  <button @click="add">+1</button>
</template>
<script setup>
import { ref } from "vue";
let a = ref(1);
const add = () => {
  a.value++;
  console.log(a);
};
</script>
<style lang="css" scoped></style>

When ref is used with an object, the returned value is a RefImpl whose .value holds a Proxy of the original object, allowing direct property access without an extra .value on nested fields.

<template>
  员工信息
  <div>姓名:{{person.name}}</div>
  <div>年龄:{{person.age}}</div>
  <div>工资:{{person.salary}}</div>
  <button @click="addSalary">涨工资</button>
</template>
<script setup>
import { ref } from 'vue';
let person = ref({
  name: '张三',
  age: 18,
  salary: 10000
});
const addSalary = () => {
  person.value.salary += 1000;
  console.log(person.value);
};
</script>
<style lang="css" scoped></style>

The reactive function, on the other hand, converts a plain object into a Proxy that tracks property accesses and mutations. It cannot be used with primitive values.

import { reactive } from 'vue';
const a = reactive(1); // will trigger a warning

For objects, reactive works as expected:

<template>
  员工信息
  <div>姓名:{{person.name}}</div>
  <div>年龄:{{person.age}}</div>
  <div>工资:{{person.salary}}</div>
  <button @click="addSalary">涨工资</button>
</template>
<script setup>
import { reactive } from 'vue';
let person = reactive({
  name: '张三',
  age: 18,
  salary: 10000
});
const addSalary = () => {
  person.salary += 1000;
  console.log(person);
};
</script>
<style lang="css" scoped></style>

A comparison table summarizes the differences:

Return type : ref returns a Ref object; reactive returns a Proxy.

Data that can be wrapped : ref handles primitives and objects; reactive only handles objects/arrays.

Accessing values : ref requires .value ; reactive allows direct property access.

Use cases : Use ref for single primitive values or when you need a mutable reference; use reactive for complex state objects with multiple properties.

The article concludes with an analogy: choosing between ref and reactive is like picking a gift for Valentine’s Day—sometimes you need a simple, precise item ( ref ), other times a richer, more surprising package ( reactive ), both aiming to make your code cleaner and development more enjoyable.