What are Computed Properties and How to Use Them in Vue.js

In Vue.js, a computed property is a property that is dynamically calculated based on other reactive properties.

They allow us to compute derived values reactively. That is, values that depend on other data and are updated automatically when that data changes.

Computed properties are reactive, meaning that they update automatically when their dependencies change.

Additionally, they are cached, so they only recalculate when their dependencies change. This means they are efficient for costly or repetitive calculations.

Basic Syntax of Computed Properties

In the Composition API, computed properties are defined using the computed function, which is imported from the vue package.

The computed function takes a getter (a function that returns the computed value) and returns a reactive reference.

Let’s see it with a simple example, such as calculating the square of a number

<template>
  <div>
    <p>Number: {{ number }}</p>
    <p>Square: {{ square }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const number = ref(2);

// Computed property to calculate the square of the number
const square = computed(() => {
  return number.value * number.value;
});

function increment() {
  number.value++;
}
</script>

Computed Properties with Setter

By default, computed properties are read-only. That is, if you try to assign a value to a computed property, Vue.js will throw an error.

However, it is also possible to create computed properties with a setter (if necessary).

Let’s see it with an example, where we calculate the full name from the first name and last name

<template>
  <div>
    <p>Full name: {{ fullName }}</p>
    <input v-model="firstName" placeholder="First Name" />
    <input v-model="lastName" placeholder="Last Name" />
  </div>
</template>

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

const firstName = ref('Juan');
const lastName = ref('Pérez');

// Computed property with getter and setter
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`;
  },
  set(value) {
    const [newFirstName, newLastName] = value.split(' ');
    firstName.value = newFirstName;
    lastName.value = newLastName;
  },
});
</script>

Practical Examples

<template>
  <div>
    <h2>Completed Tasks</h2>
    <ul>
      <li v-for="task in completedTasks" :key="task.id">
        {{ task.text }}
      </li>
    </ul>
  </div>
</template>

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

const tasks = ref([
  { id: 1, text: 'Learn Vue.js', completed: true },
  { id: 2, text: 'Go shopping', completed: false },
  { id: 3, text: 'Write an article', completed: true },
]);

// Computed property to filter the completed tasks
const completedTasks = computed(() => {
  return tasks.value.filter(task => task.completed);
});
</script>

<template>
  <div>
    <h2>Shopping Cart</h2>
    <ul>
      <li v-for="product in cart" :key="product.id">
        {{ product.name }} - ${{ product.price }}
      </li>
    </ul>
    <p>Total: ${{ total }}</p>
  </div>
</template>

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

const cart = ref([
  { id: 1, name: 'T-shirt', price: 20 },
  { id: 2, name: 'Pants', price: 40 },
  { id: 3, name: 'Shoes', price: 60 },
]);

// Computed property to calculate the total of the cart
const total = computed(() => {
  return cart.value.reduce((sum, product) => sum + product.price, 0);
});
</script>