Computed Properties

computed caches derived values and re-evaluates when dependencies change. This lesson covers practical patterns, syntax, and mistakes to avoid.

Derived State with computed

computed caches derived values and re-evaluates when dependencies change.

Prefer computed over methods for values used in templates repeatedly.

import { computed, ref } from 'vue'
const items = ref([{ price: 5 }, { price: 7 }])
const total = computed(() => items.value.reduce((a, i) => a + i.price, 0))

Cached total from items.

Writable Computed

get/set form for two-way derived state.

Prefer Composition API + script setup.
Use computed for derived UI.
Keep side effects intentional.
Practice in a small Vite app.

Computed Properties Cheatsheet

Quick reference for patterns covered in this lesson.

Item	Example	Purpose
computed	cache	Derived
methods	always run	Contrast
writable	get/set	Advanced
deps	auto track	Reactivity
debug	devtools	Inspect
avoid	side effects	Purity

Keep Pure

Do not fetch inside computed.

Common Mistakes

Using methods for expensive derived lists.
Mutating state inside computed getters.

Key Takeaways

Computed Properties is important in Vue apps.
Practice in SFCs.
Prefer clear naming.
Check Vue docs for details.

Pro Tip

For async derived data, use a watcher or data library — not computed.