Vue.js Computed Properties

• What is a Computed Property
• An example of a computed property
• Computed properties vs methods

What is a Computed Property

In Vue.js 3 you can output any data value using double curly braces:

<template>
  <p>{{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(1)
</script>

This property can host some small computations, for example

<template>
  {{ count * 10 }}
</template>

but you’re limited to a single JavaScript expression.

In addition to this technical limitation, you also need to consider that templates should only be concerned with displaying data to the user, not perform logic computations.

To do something more than a single expression, and to have more declarative templates, you use a computed property.

With the Composition API you import computed from vue. With the Options API you define computed properties in the computed option of the component. Here are both.

An example of a computed property

Here’s an Options API example that uses a computed property count to calculate the output. Notice:

1. I didn’t have to call count(). Vue.js automatically invokes the function
2. I used a regular function (not an arrow function) to define the count computed property because I need to be able to access the component instance through this.

<template>
  <p>{{ count }}</p>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    }
  },
  computed: {
    count() {
      return 'The count is ' + this.items.length * 10
    }
  }
}
</script>

Same idea with <script setup>:

<template>
  <p>{{ count }}</p>
</template>

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

const items = ref([1, 2, 3])

const count = computed(() => {
  return 'The count is ' + items.value.length * 10
})
</script>

Computed properties vs methods

If you already know Vue methods, you may wonder what’s the difference.

First, methods must be called, not just referenced, so you’d need to do call count() instead of count if you have a count method:

<script setup>
import { ref } from 'vue'

const items = ref([1, 2, 3])

function count() {
  return 'The count is ' + items.value.length * 10
}
</script>

But the main difference is that computed properties are cached.

The result of the count computed property is internally cached until the items data property changes. Watchers are a different tool: they run side effects when something changes, they don’t return a cached value for the template.

Important: computed properties are only updated when a reactive source updates. Regular JavaScript methods are not reactive, so a common example is to use Date.now():

<template>
  <p>{{ now }}</p>
</template>

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

const now = computed(() => {
  return Date.now()
})
</script>

It will render once, and then it will not be updated even when the component re-renders. Just on a page refresh, when the Vue component is quit and reinitialized.

In this case a method is better suited for your needs.

Want me to talk about your product? You can sponsor this site.