Understanding Computed Properties in Vue 3

Vue 3’s reactivity system makes it easy to derive values from reactive state. A computed property is a value that Vue automatically recalculates when its reactive dependencies change and caches between updates when those dependencies stay the same.

1. What Is a Computed Property?

Computed properties are designed for derived state. Instead of storing both source data and a duplicated calculated value, you define how the value should be computed from its dependencies.

2. Why Use Computed Properties?

• Caching: a computed getter is reevaluated only when one of its tracked dependencies changes.
• Cleaner templates: derived logic stays in JavaScript instead of being repeated in markup.
• Reactive updates: the UI stays synchronized automatically.

3. Basic Usage

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

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

const firstName = ref('');
const lastName = ref('');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

fullName updates whenever firstName or lastName changes.

4. Computed Properties vs. Methods

Use computed properties for values that conceptually represent state derived from other reactive state.

5. Writable Computed Properties

A computed value can also provide a setter:

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

const price = ref(100);
const quantity = ref(1);

const total = computed({
  get() {
    return price.value * quantity.value;
  },
  set(newValue) {
    quantity.value = newValue / price.value;
  }
});
</script>

Writable computed properties can be useful when a derived value also needs a well-defined reverse update operation. Use them sparingly because a complex setter can make data flow harder to understand.

6. Watch a Computed Value

Computed refs can be watched like other reactive sources:

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

const items = ref([1, 2, 3, 4]);
const itemCount = computed(() => items.value.length);

watch(itemCount, (newCount, oldCount) => {
  console.log(`Item count changed from ${oldCount} to ${newCount}`);
});
</script>

7. Common Mistakes

• Performing side effects inside a computed getter.
• Mutating unrelated state while calculating a value.
• Storing a duplicate value that could simply be computed from existing state.

8. Best Practices

• Keep computed getters pure and focused on deriving values.
• Use watch or event handlers for side effects.
• Prefer simple getters over complicated writable computed values.
• Choose methods when you explicitly want work to run each time the method is called.

Conclusion

Computed properties are one of Vue 3’s most useful tools for derived reactive state. They keep calculations declarative, cached, and automatically synchronized with their dependencies, which makes components easier to reason about and maintain.