This article explains how to use computed properties in Vue.

What are Computed Properties?

You can think of them as a feature for performing calculations.

When you want to display the result of calculations or concatenated strings within a Vue template, packing logic directly into the template can make it harder to read.

Instead, write your calculation or concatenation logic in computed, and use the computed function result in the display section. That’s what computed properties are for.

When Using computed (Computed Properties)

<template>
  <div>{{ sumAB }}</div>
</template>
<script setup>
import { ref, computed } from "vue"

const a = ref(1)
const b = ref(2)

const sumAB = computed(() => {
  return a.value + b.value
})
</script>

Without Using computed (Computed Properties)

<template>
  <div>{{ a + b }}</div>
</template>
<script setup>
import { ref } from "vue"

const a = ref(1)
const b = ref(2)
</script>

When Not Using computed, Complex Calculations Can Become Messy

For example, let’s write a logic that outputs "It's 3" if a + b equals 3, and "It's different" otherwise.

const result = computed(() => {
  const sumAB = a.value + b.value
  if (sumAB === 3) {
    return "It's 3"
  } else {
    return "It's different"
  }
})

In this example, it’s possible to write it in one line, but if you think about cases where output changes based on conditions like with if statements, you’ll see that without using computed, the display can become cluttered.

How to Use computed

When Using Vue 3 (Setup)

<template>
  <div>{{ result }}</div>
</template>

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

const a = ref(1)
const b = ref(2)

const result = computed(() => {
  const sumAB = a.value + b.value
  if (sumAB === 3) {
    return "It's 3"
  } else {
    return "It's different"
  }
})
</script>

Import the Necessary Elements

import { ref, computed } from "vue"

Define Reactive Variables with Initial Values

const a = ref(1)
const b = ref(2)

Use computed

result is the function name.

The returned value is the final output result.

const result = computed(() => {
  const sumAB = a.value + b.value
  if (sumAB === 3) {
    return "It's 3"
  } else {
    return "It's different"
  }
})

Display It

<div>{{ result }}</div>

When Using Vue 2

<template>
  <div>{{ result }}</div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2,
    }
  },
  computed: {
    result() {
      const sumAB = a + b
      if (sumAB === 3) {
        return "It's 3"
      } else {
        return "It's different"
      }
    },
  },
}
</script>

Characteristics of computed

Reevaluation When Reactive Variables Update

Reactive variables, in this example, are the parts that use ref.

const a = ref(1)
const b = ref(2)

When a or b changes, it reevaluates (recalculates) the result.

Cached

Unless a or b changes, this function won’t be executed again, instantly returning the cached content.

This behavior can impact implementations like page transitions or toggling component visibility. Depending on the requirements, it may sometimes be better to use a regular function rather than computed.

In Conclusion

Comparing the Vue 3 setup style with the Vue 2 style, there are quite a few changes.

For those wanting to dive deeper, you can find everything on this page:

Vue.js - Computed Properties