Computed with getter and setter in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a computed property in Vue?

A computed property is a special reactive value that automatically updates when its dependencies change. It is used to calculate values based on other data in a Vue component.

intermediate

How does a computed property with a getter and setter work in Vue?

It has two parts: a getter to return a value based on reactive data, and a setter to update reactive data when the computed property is changed.

intermediate

Why use a setter in a computed property?

A setter lets you react to changes when someone modifies the computed property, allowing you to update the underlying data accordingly.

beginner

Show a simple example of a computed property with getter and setter in Vue.

Example:
const fullName = computed({
  get() { return firstName.value + ' ' + lastName.value },
  set(value) {
    const parts = value.split(' ')
    firstName.value = parts[0]
    lastName.value = parts.slice(1).join(' ') || ''
  }
})

beginner

What happens if you only provide a getter in a computed property?

The computed property becomes read-only. You cannot assign a new value to it because there is no setter to handle changes.

What does the setter in a Vue computed property do?

A Prevents changes to the computed property

B Updates the underlying reactive data when the computed property is assigned a new value

C Returns the computed value based on reactive data

D Triggers a lifecycle hook

The setter updates the reactive data when you assign a new value to the computed property.

If a computed property has only a getter, what is true?

A It does not update when dependencies change

B It can be assigned new values

C It is read-only

D It requires a setter to work

Without a setter, the computed property is read-only and cannot be assigned new values.

Which Vue API is used to create a computed property with getter and setter?

A computed()

B ref()

C watch()

D reactive()

The computed() function creates computed properties with optional getter and setter.

What is a common use case for a computed property with a setter?

A To format and update multiple reactive values together

B To display static text

C To fetch data from an API

D To define component props

Setters let you update multiple reactive values when the computed property changes, like splitting a full name into first and last names.

In Vue, what happens when dependencies of a computed property change?

A Nothing happens until manually triggered

B The setter is called

C The component reloads

D The computed property automatically recalculates

Computed properties automatically recalculate when their reactive dependencies change.

Explain how a computed property with getter and setter works in Vue and why it is useful.

Think about how you can both read and write a computed value.

Describe a real-life example where a computed property with getter and setter would help manage data in a Vue component.

Imagine editing a full name input that updates separate fields.

Practice

1.

What is the main purpose of a computed property with both get and set in Vue?

easy

A. To create a reactive property that can both read and update data

B. To define a method that runs only once

C. To store static values that never change

D. To replace the data object entirely

Solution

1. Step 1: Understand computed properties

   Computed properties in Vue are reactive and can automatically update when dependencies change.

2. Step 2: Role of getter and setter

   Using both get and set allows reading the value and updating related data reactively.

3. Final Answer:

   To create a reactive property that can both read and update data -> Option A

4. Quick Check:

   Computed with get/set = reactive read and write [OK]

Hint: Remember: get reads, set writes reactive data [OK]

Common Mistakes:

• Thinking computed properties are static
• Confusing computed with methods
• Believing set is optional for writing data

2.

Which of the following is the correct syntax to define a computed property with a getter and setter in Vue 3 using <script setup>?

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

easy

A. Use arrow functions for get and set

B. Correct as is

C. Remove set, only get is allowed

D. Use function keyword without commas

Solution

1. Step 1: Check computed property syntax

   Vue 3 allows computed properties with an object containing get and set methods.

2. Step 2: Validate the example code

   The code correctly defines get and set as functions inside an object passed to computed().

3. Final Answer:

   Correct as is -> Option B

4. Quick Check:

   Object with get/set inside computed = correct syntax [OK]

Hint: Use object with get and set functions inside computed() [OK]

Common Mistakes:

• Using arrow functions that break 'this' context
• Omitting commas between get and set
• Trying to define computed as a single function

3.

Given this Vue 3 <script setup> code, what will be the console output after fullName.value = 'Jane Doe'?

import { ref, computed } from 'vue'

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

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

fullName.value = 'Jane Doe'
console.log(firstName.value, lastName.value)

medium

A. 'Jane Doe' 'Doe'

B. Error: Cannot assign to computed property

C. 'Jane' 'Doe'

D. 'John' 'Smith'

Solution

1. Step 1: Understand the setter logic

   Setting fullName.value splits the string into ['Jane', 'Doe'] and assigns to firstName.value and lastName.value.

2. Step 2: Check console.log output

   After assignment, firstName.value is 'Jane' and lastName.value is 'Doe', so console logs 'Jane Doe'.

3. Final Answer:

   'Jane' 'Doe' -> Option C

4. Quick Check:

   Setter splits and assigns names = 'Jane' 'Doe' [OK]

Hint: Setter splits string and updates refs accordingly [OK]

Common Mistakes:

• Expecting full string in firstName
• Thinking computed properties are read-only
• Confusing ref.value and computed.value

4.

What is wrong with this computed property definition in Vue 3?

const fullName = computed({
  get: () => {
    return firstName.value + ' ' + lastName.value
  },
  set: (value) => {
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})

medium

A. Arrow functions break the reactivity context for get and set

B. Missing commas between get and set

C. Cannot use computed with set method

D. Must use async functions for get and set

Solution

1. Step 1: Analyze arrow function usage

   Arrow functions do not bind their own this, which can break reactivity when accessing reactive refs inside get/set.

2. Step 2: Understand Vue reactivity context

   Using normal function syntax ensures correct reactivity and access to reactive data.

3. Final Answer:

   Arrow functions break the reactivity context for get and set -> Option A

4. Quick Check:

   Use normal functions, not arrow, for computed get/set [OK]

Hint: Avoid arrow functions in computed get/set [OK]

Common Mistakes:

• Using arrow functions for get/set
• Thinking commas are missing
• Believing set is not allowed

5.

You want to create a computed property fullName that updates firstName and lastName refs, but also trims extra spaces and handles single names gracefully. Which computed property definition is best?

const fullName = computed({
  get() {
    return `${firstName.value.trim()} ${lastName.value.trim()}`.trim()
  },
  set(value) {
    const names = value.trim().split(/\s+/)
    firstName.value = names[0] || ''
    lastName.value = names.slice(1).join(' ') || ''
  }
})

hard

A. Setter should not use slice, only split

B. It will fail if value is empty string

C. Getter should not trim values

D. This handles trimming and single names correctly

Solution

1. Step 1: Check trimming in getter

   The getter trims both first and last names and then trims the combined string to avoid extra spaces.

2. Step 2: Analyze setter logic

   The setter trims input, splits by spaces, assigns first word to firstName, and joins the rest for lastName, handling single names gracefully.

3. Final Answer:

   This handles trimming and single names correctly -> Option D

4. Quick Check:

   Trim and split with fallback = robust computed set/get [OK]

Hint: Trim inputs and handle missing last name with slice [OK]

Common Mistakes:

• Not trimming input causing extra spaces
• Failing on single-word names
• Using split without regex for multiple spaces