Vue Tip: Use Eager Computed Without Lazy Evaluation

Computed properties are evaluated lazily which means they are only evaluated when they are accessed.

Lazy Evaluation

You can try it yourself in the following StackBlitz playground:

The demo includes the following App.vue component:

1<script setup lang="ts">
2import { computed, ref } from 'vue'
3
4const count = ref(0)
5const computedCounter = ref(0)
6const showDoubleCount = ref(false)
7
8const doubleCount = computed(() => {
9  computedCounter.value++
10  return count.value * 2
11})
12</script>
13
14<template>
15  <div class="container">
16    <span>Count: {{ count }}</span>
17    <button @click="count++">Increment</button>
18    <span>computedCounter: {{ computedCounter }}</span>
19    <span v-if="showDoubleCount">Double Count: {{ doubleCount }}</span>
20    <button @click="showDoubleCount = !showDoubleCount">Show Double Count</button>
21  </div>
22</template>

You could assume that computedCounter is incremented by each click on the Increment button as it is part of the doubleCount computed property. But that is not the case.

If you click the Increment button you can see that computedCounter stays at 0 although counter is correctly incremented by each click.

If you now click Show Double Count button and click the Increment button afterward, counter and computedCounter both increment.

So let's take a look at what is happening behind the scenes:

The callback function of the computed property only runs once the computed's value is being read (initially or after it was marked for an update because one of its dependencies changed). In our example, the computed property is initially not being read as the template reference is unavailable due to the v-if directive.

This lazy evaluation often confuses developers as they expect their computed property to update (by putting a console.log inside its callback or expecting an updated value in the Vue DevTools) if one of its dependencies changes.

computedEager Composable

The computedEager VueUse composable provides a eager computed property without lazy evaluation.

It's a good choice for simple operations that contain a rarely changing return value (in most cases a boolean).