What are Computed Properties in Vue? | Vue.js Interview Questions

What You'll Learn

What computed properties are
Computed vs methods
Writable computed

Computed Properties

Cached reactive values that auto-update when dependencies change.

code.txtVUE

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

const firstName = ref('John')
const lastName = ref('Doe')

// Computed property
const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value
})
</script>

<template>
  <p>{{ fullName }}</p>
</template>

Computed vs Methods

code.txtVUE

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

const count = ref(0)

// Computed - cached
const doubleComputed = computed(() => count.value * 2)

// Method - runs every time
function doubleMethod() {
  return count.value * 2
}
</script>

Writable Computed

code.jsJavaScript

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

fullName.value = 'Jane Smith' // Triggers setter