Working with Computed Properties

Tutorial 4 of 5

Introduction

In this tutorial, we will explore how to work with computed properties in Vue 3. Computed properties are a feature that enables you to create reactive data that depends on other data. This means that when the dependent data changes, the computed property automatically updates to reflect these changes.

By the end of this tutorial, you will:

Understand what computed properties are.
Know how to create and use computed properties in a Vue 3 application.
Learn best practices when working with computed properties.

Prerequisites:

Basic knowledge of JavaScript.
Familiarity with Vue.js.

Step-by-Step Guide

Understanding Computed Properties

Computed properties are functions you define in the Vue instance's computed property. They are used to compute derived data based on your instance's data. Computed properties are lazy-loaded, meaning they only re-evaluate when their reactive dependencies change.

Creating a Computed Property

To create a computed property, you add a function to the computed property in your Vue instance. The function should return the computed value.

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

In this example, fullName is a computed property that depends on firstName and lastName. Whenever firstName or lastName changes, fullName will be updated.

Code Examples

Example 1: Basic Computed Property

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    }
  },
  computed: {
    // fullName is a computed property that returns the full name
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

// Mount the app
app.mount('#app')

// In your template, you can use the computed property as follows:
// <p>{{ fullName }}</p>
// This will output: "John Doe"

In this example, fullName is a computed property that concatenates firstName and lastName.

Example 2: Computed Property with a Setter

Computed properties can also have a setter, which is used when you want to change the computed property's value.

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    }
  },
  computed: {
    fullName: {
      get() { // getter
        return `${this.firstName} ${this.lastName}`
      },
      set(value) { // setter
        const parts = value.split(' ')
        this.firstName = parts[0]
        this.lastName = parts[1]
      }
    }
  }
})

// Mount the app
app.mount('#app')

// You can now set fullName like this:
// app.fullName = 'Jane Doe'
// This will update firstName and lastName accordingly

In this second example, we've added a setter to the fullName computed property. Now when you set fullName, it updates firstName and lastName.

Summary

In this tutorial, we've learned about computed properties in Vue 3. We've seen how they allow you to create reactive data that automatically updates when its dependencies change. We've also learned how to create computed properties with both getters and setters.

Next, you could explore Vue's other reactive features, such as watchers and methods.

Additional resources:

Practice Exercises

Create a Vue app with a data property count and a computed property isEven that returns whether count is an even number.
Extend the previous exercise by adding a button that increases count and displays a message using isEven.
Create a Vue app with data properties firstName and lastName, and computed properties fullName and initials. fullName should be a getter and setter, and initials should return the first letters of firstName and lastName.

Solutions and explanations to these exercises will be provided, but try to solve them on your own first to get the most out of this tutorial.