Fundamentals of Computed Properties in Vue.js: Composition API

Computed Properties

Let's consider a reactive object:

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

In this object, we want to display messages indicating whether the author has published books:

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

We have performed a computation based on author.books. The message displayed in the template depends on the value of author.books. We can use this calculation multiple times in the template but do not want to write it repeatedly. Therefore, computed properties should be used for complex logic involving reactive data.

Using Computed Properties Example:

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

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// A computed reference
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

In this example, we defined a computed property named publishedBooksMessage. The computed() function expects a getter function, and the returned value is a computed reference. You can access the computed result using publishedBooksMessage.value. However, in templates, computed references are automatically unwrapped, so you can reference them without adding .value.

Computed properties track their reactive dependencies. Vue knows that the calculation of publishedBooksMessage depends on the value of author.books, and when author.books changes, it updates all contexts that depend on publishedBooksMessage.

Computed Caching vs. Methods

The same result can be achieved using a method:

<p>{{ calculateBooksMessage() }}</p>

In the component:

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

You can define the same function as a method instead of a computed property. Both approaches yield the same result. However, I want to emphasize that computed properties are cached. This means that a
computed property is reevaluated only when its reactive dependencies change. If the value of author.books hasn’t changed when the component re-renders, it will return the previously computed result without re-running the getter function.

Why Caching Is Necessary ?

Consider a scenario where we have a costly computed list that requires looping through a large array and performing many calculations. If we have other computed properties that depend on the list, without caching, we would be running the getter of our list much more often than necessary!

Best Practices

Getters should be side-effect-free. It is important that computed getter functions perform only pure computations and avoid side effects.

For example, do not change other states, make asynchronous requests, or alter the DOM within a computed getter! Think of a computed property as a way to derive a value from other values—the sole responsibility is to calculate and return that value.

Conclusion

We learned how to perform calculations with reactive data in Vue.js. To ensure high performance of the application, we should use computed properties for operations based on reactive data in Vue.js.