0Pricing
Vue Academy · Lesson

Computed Properties

Derive cached reactive values with computed properties.

What Is a Computed Property?

A computed property derives a value from other reactive data.

  • It recalculates only when its dependencies change
  • It reads like a normal property in templates
  • It keeps templates clean by moving logic into JS

Defining a computed

In the Composition API, use the computed function.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

All lessons in this course

  1. Reactivity Fundamentals
  2. Computed Properties
  3. Watchers and Deep Reactivity
← Back to Vue Academy