Computed with getter and setter in Vue - Performance & Optimization

Performance: Computed with getter and setter

MEDIUM IMPACT

This affects how reactive data updates trigger DOM updates and re-renders in Vue components.

Managing reactive state with computed properties that need both read and write access

Vue

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(' ') || '';
  }
});

The setter allows direct updates to the computed property, batching reactive changes and reducing redundant updates.

📈 Performance Gainreduces reactive update cycles and re-renders by combining reads and writes in one reactive property

Managing reactive state with computed properties that need both read and write access

Vue

const fullName = computed(() => firstName.value + ' ' + lastName.value);
// Updating fullName directly is not possible, so manual watchers or methods are used to sync changes

Without a setter, updating the computed property requires extra watchers or methods, causing more reactive updates and potential redundant re-renders.

📉 Performance Costtriggers multiple reactive updates and re-renders for a single logical change

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Computed with getter only and manual sync	Multiple reactive triggers	Multiple reflows per update	Higher paint cost due to redundant renders	[X] Bad
Computed with getter and setter	Single reactive trigger per update	Single reflow per update	Lower paint cost due to optimized renders	[OK] Good

Rendering Pipeline

Vue tracks dependencies during the computed property's getter execution. When dependencies change, Vue schedules updates. The setter allows direct mutation of dependencies, minimizing extra watchers and reactivity overhead.

→Dependency Tracking

→Reactive Update Scheduling

→Component Re-render

⚠️ BottleneckReactive Update Scheduling when multiple watchers or manual syncs are used instead of a setter

Core Web Vital Affected

INP

This affects how reactive data updates trigger DOM updates and re-renders in Vue components.

Optimization Tips

1Use computed properties with both getter and setter to optimize reactive updates.

2Avoid manual syncing of computed properties without setters to prevent redundant re-renders.

3Monitor reactive update cycles in DevTools Performance panel to catch inefficiencies.

Performance Quiz - 3 Questions

What is the main performance benefit of using a computed property with both getter and setter in Vue?

A It increases the number of watchers for better tracking.

B It reduces redundant reactive updates by combining read and write logic.

C It delays DOM updates to improve load time.

D It disables reactivity for faster rendering.

DevTools: Performance

How to check: Record a performance profile while interacting with the component updating computed properties. Look for multiple reactive update cycles or redundant component re-renders.

What to look for: Fewer reactive update events and shorter scripting time indicate better performance with getter/setter computed properties.

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