Understanding Vue 3 Composition API

1. Introduction

Goal of the tutorial

This tutorial aims to provide a comprehensive understanding of the Vue 3 Composition API, a new feature in Vue 3 that allows for a more efficient and logical organization of your Vue components.

What the user will learn

By the end of this tutorial, you will have a solid understanding of the Vue Composition API, how it works, and how to use it in your Vue applications.

Prerequisites

• Basic knowledge of JavaScript and Vue.js would be beneficial.
• Have Vue 3 installed in your local development environment.

2. Step-by-Step Guide

The Composition API is a set of additive, function-based APIs that allow flexible composition of component logic. It’s an alternative to the existing Options API.

Setup Function

The Composition API introduces a setup function, which is a new component option where we can use most of the Composition API functions. The setup function is the entry point for using the Composition API inside components.

export default {
  setup() {
    // Composition API logic here
  },
}

Reactive State

The reactive function is used to create a reactive object. Changes to the object’s properties are observed, just like data in the Options API.

const state = reactive({ count: 0 });

Refs

The ref function is used to create a reactive reference. A ref is like a box that can hold a value. You access the value by using .value.

const count = ref(0);

Computed Properties

computed properties work the same as in the Options API. The computed function takes a getter function and returns an immutable reactive ref object.

const count = ref(0);
const countPlusOne = computed(() => count.value + 1);

3. Code Examples

Example 1: Reactive State

import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
      increment: function () {
        this.count++;
      },
    });

    return state;
  },
};

In this example, state is a reactive object that will react to changes in its properties. The increment function increases the count property by 1 each time it's called.

Example 2: Refs

import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

In this example, count is a reactive reference. We increment count by using the increment function and accessing the value by using .value.

4. Summary

We've covered the basics of the Vue 3 Composition API, including the setup function, reactive state with reactive and ref, and computed properties with computed.

Your next steps could be to explore more advanced features of the Composition API, such as watch and watchEffect, or to start refactoring some of your existing components to use the Composition API.

5. Practice Exercises

Exercise 1: Create a reactive object with properties firstName and lastName, and a computed property fullName.

Solution:

import { reactive, computed } from "vue";

export default {
  setup() {
    const state = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    const fullName = computed(() => `${state.firstName} ${state.lastName}`);

    return { state, fullName };
  },
};

In this solution, we're creating a reactive state with firstName and lastName. Then we're creating a fullName computed property that combines firstName and lastName.

Exercise 2: Create a reactive reference that holds an array of numbers, and a computed property that returns the sum of the numbers.

Solution:

import { ref, computed } from "vue";

export default {
  setup() {
    const numbers = ref([1, 2, 3, 4, 5]);

    const sum = computed(() => numbers.value.reduce((a, b) => a + b, 0));

    return { numbers, sum };
  },
};

In this solution, we're creating a numbers ref that holds an array of numbers. Then we're creating a sum computed property that sums the numbers in the array.