Vue 3 Composition API: A Deep Dive into Reactivity

Vue 3 introduces the Composition API, a powerful addition that provides a more flexible and modular way to organize and reuse code in your components. One of the key aspects of the Composition API is its emphasis on reactivity, allowing you to create components that dynamically update in response to changes in your data. In this article, we’ll take a comprehensive look at the Vue 3 Composition API with a focus on understanding reactivity.

Understanding Reactivity in Vue 3

Reactive Data Properties

In Vue 3, reactivity is achieved through the reactive function. Let’s create a simple example to demonstrate reactivity:

// Import the reactive function from Vue
import { reactive } from 'vue';

// Create a reactive data object
const userData = reactive({
  name: 'John Doe',
  age: 25,
});

// Access and update reactive properties
console.log(userData.name);  // Output: John Doe
userData.age = 26;

The reactive function makes the properties of the userData object reactive, so any changes to these properties will trigger updates in the UI.

Reactivity in the Composition API

Ref and Reactive

The Composition API introduces the ref and reactive functions for creating reactive references and reactive objects, respectively. Let’s see how they work:

import { ref, reactive } from 'vue';

// Creating a reactive reference
const count = ref(0);

// Creating a reactive object
const user = reactive({
  name: 'Alice',
  age: 30,
});

// Updating reactive properties
count.value++;  // Incrementing count
user.age = 31;   // Updating user's age

Computed Properties and Watchers

Computed Properties

Computed properties allow you to derive values based on other reactive properties, ensuring that they update automatically when the dependencies change.

import { ref, computed } from 'vue';

const price = ref(10);

// Creating a computed property
const discountedPrice = computed(() => {
  return price.value * 0.9; // 10% discount
});

console.log(discountedPrice.value); // Output: 9

Understanding the setup Function in Vue 3 Composition API:

The setup function is a fundamental part of the Vue 3 Composition API. It is used in Single File Components (SFCs) to set up and organize the component’s logic. The setup function runs before the component is created, and it provides a new and flexible way to define reactive data, computed properties, methods, and more.

Here are some key aspects and ideas related to the setup function in Vue 3:

1. Basic Structure of the setup Function:

The setup function takes two arguments:

<script setup>
export default function (props, context) {
  // Component logic goes here
}
</script>

• props: An object containing the props passed to the component.
• context: An object containing various properties like attrs, slots, emit, etc.

Watchers

Watchers are used to perform custom logic in response to changes in reactive properties. Let’s create a simple watcher:

import { ref, watch } from 'vue';

const count = ref(0);

// Creating a watcher
watch(() => {
  console.log(`Count changed to ${count.value}`);
});

// Triggering a change
count.value++;  // Output: Count changed to 1

Lifecycle Hooks in the Composition API

onMounted and onUnmounted

The Composition API provides the onMounted and onUnmounted lifecycle hooks for executing logic when a component is mounted and unmounted, respectively.

import { onMounted, onUnmounted } from 'vue';

const myComponent = {
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });

    onUnmounted(() => {
      console.log('Component is unmounted');
    });

    // ... other setup logic

    return {
      // ... properties and methods
    };
  },
};

Conclusion: Leveraging Reactivity for Dynamic Vue 3 Components

The Vue 3 Composition API provides a flexible and powerful way to handle reactivity in your components. By using functions like reactive, ref, computed, and watch, you can create components that respond dynamically to changes in data. Understanding the principles of reactivity is crucial for mastering the Composition API and building robust and efficient Vue 3 applications. Happy coding!