Home / Blog / Reactivity 101 in Vue.js
Reactivity 101 in Vue.js

Reactivity 101 in Vue.js

Daniel Kelly
Daniel Kelly
April 25th 2024

Understanding the Composition API

The Composition API is an alternative way to define the structure of a Vue component. It encourages breaking down component logic into smaller, reusable units called Composition Functions. These functions can be composed together to form a complete component. Let's create a simple example using the Composition API to understand how reactivity works:

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

const message = ref('Hello, Vue 3 Composition API!');

const changeMessage = () => {
  message.value = 'Vue 3 Composition API is awesome!';
};
</script>
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

In this example, we're using the Composition API to define a component. We use the ref function to create a reactive reference to the message property. When we click the button, the changeMessage function updates the message property, and Vue's reactivity system takes care of updating the DOM.

Ref and Reactive

The Composition API provides two main functions for creating reactivity: ref and reactive.

  • ref is used to create a reactive reference to a single value, like a variable.
  • reactive is used to create a reactive object that can contain multiple properties.

You can choose between ref and reactive based on your specific needs and data structure.

The main difference between ref and reactive in Vue.js's Composition API lies in the complexity of the data they handle. ref is used for creating a reactive reference to a single value, typically simple variables or primitive types like strings and numbers. On the other hand, reactive is employed to create a reactive object capable of containing multiple properties. While ref is suitable for individual data points, reactive is ideal when you need to manage more complex, nested data structures. This fundamental distinction allows developers to choose the right reactivity tool for their specific use case, making Vue.js's Composition API exceptionally flexible in accommodating various data scenarios.

Computed Properties with the Composition API

Just like in the Options API, you can create computed properties with the Composition API. Computed properties are functions that depend on reactive data and are recalculated when their dependencies change.

<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const double-count = computed(() => count.value * 2);
</script>

In this example, doubleCount is a computed property that automatically updates whenever the count value changes.

Reactivity with Watchers

The Composition API also provides a powerful way to watch for changes in reactive data using the watch function. You can perform custom actions when specific data properties change.

<script setup>
import { ref, watch } from 'vue';
const message = ref('Hello, Vue 3 Composition API!');
watch(message, (newValue, oldValue) => {
  console.log(`Message changed from ${oldValue} to ${newValue}`);
});
</script>

Here, we're watching the message property and logging a message whenever it changes.

Conclusion

The Vue.js Composition API offers a flexible and powerful way to manage reactivity in your Vue applications. With it, you can define reactive data and computed data, and even perform side effects with watchers. If you’d like to get hands-on learning the reactivity fundamentals of the Composition API, checkout our course Vue.js 3 Fundamentals with the Composition API!

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Latest Vue School Articles

Master Vue.js 3: The Ultimate Guide for Building Real-World Apps in 2024

Master Vue.js 3: The Ultimate Guide for Building Real-World Apps in 2024

Unlock the secrets to master Vue.js 3 in 2024. Discover expert tips, best practices, and advanced techniques for building top-tier, real-world apps.
Mostafa Said
Mostafa Said
How to Structure a Large Scale Vue Application

How to Structure a Large Scale Vue Application

Organizing your Vue.js project to make it scalable is essential to success. In this article, learn some strategies for structuring your large scale Vue.js apps
Daniel Kelly
Daniel Kelly

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 120.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.