When building interactive applications with Vue.js, reactivity is a core concept that enables data to flow seamlessly between your application’s logic and the user interface. Let’s explore how reactivity works in Vue.js, focusing on two key tools:
ref and reactive. Basics of Reactivity in Vue.js
To understand Vue’s reactivity system, let’s start with a simple example. Suppose we want to manage a value, count, that updates dynamically.
Example Without Reactivity
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Value: {{ count }}</p>
{{ changeValue() }}
</div>
<script>
const { createApp } = Vue;
const app = createApp({
setup() {
let count = 0;
function changeValue() {
count = 1;
}
return {
changeValue,
count,
};
},
});
app.mount('#app');
</script>
</body>
</html>When you attempt to use this count variable in your Vue application, you’ll notice that changes to count are not reflected in the user interface.
Why? Vue’s reactivity system is not aware of plain variables. To make count reactive, we need to wrap it in a ref.
Using ref for Reactivity
The ref function creates a reactive wrapper for a value. Let’s update our example:
const { createApp, ref } = Vue;
const app = createApp({
setup() {
let count = ref(0);
function changeValue() {
setTimeout(() => {
count.value = 1;
}, 3000);
}
return {
changeValue,
count,
};
},
});
app.mount('#app');After adding ref, you can see that the value is updated.
Key Points About ref
• Reactive Wrapper: ref wraps the value to make it reactive
• Access Value: To access or modify the value of a ref, use the .value property
• Dynamic Updates: When the .value changes, the UI automatically updates to reflect the new value
Working with Complex Objects Using ref
When dealing with more complex structures, such as objects, you can still use ref:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Name: {{ pet.name }}</p>
<p>Age: {{ pet.age }}</p>
<p>Favorite toys: {{ pet.favoriteToys.join(', ') }}</p>
<button @click="changeValue">Update toys</button>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
let pet = ref({
name: 'Sunny',
age: 2,
favoriteToys: ['ball', 'frisbee'],
});
function changeValue() {
pet.value.favoriteToys.push('rope');
}
return {
changeValue,
pet,
};
},
});
app.mount('#app');
</script>
</body>
</html>When updating nested properties of an object wrapped in ref, you still use .value to access the reactive object.
I added a click event to avoid infinite updates to the array. Now, when you click the button, it will add rope to the array of toys.
Introducing reactive
reactive is an alternative to ref, designed for creating reactive objects directly. Unlike ref, you don’t need to use .value to access or modify properties.
Example with reactive
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Name: {{ pet.name }}</p>
<p>Age: {{ pet.age }}</p>
<p>Favorite toys: {{ pet.favoriteToys.join(', ') }}</p>
<button @click="changeValue">Update toys</button>
</div>
<script>
const { createApp, reactive } = Vue;
const app = createApp({
setup() {
let pet = reactive({
name: 'Sunny',
age: 2,
favoriteToys: ['ball', 'frisbee'],
});
function changeValue() {
pet.favoriteToys.push('rope');
}
return {
changeValue,
pet,
};
},
});
app.mount('#app');
</script>
</body>
</html>We added reactive from Vue, changed ref to reactive, and removed .value when accessing the favoriteToys array.
After clicking on Update toys button the array is updated.
Comparing ref and reactive
Choosing Between ref and reactive
• Use ref: For single values or when you explicitly need .value (e.g., compatibility with other Vue functions)
• Use reactive: For objects or collections where you want a simpler syntax for property access and updates