Watch vs computed decision in Vue - Hands-On Comparison

Watch vs Computed Decision in Vue

📖 Scenario: You are building a simple Vue app that shows a user's full name by combining their first and last names. You want to decide whether to use a computed property or a watch effect to update the full name when the first or last name changes.

🎯 Goal: Create a Vue component that stores firstName and lastName as reactive variables. Then, use a computed property to automatically combine them into fullName. Finally, add a watch effect that logs a message whenever fullName changes.

📋 What You'll Learn

Use Vue 3.4+ Composition API with <script setup>

Create reactive variables firstName and lastName with initial values

Create a computed property called fullName that combines firstName and lastName

Use watch to log a message when fullName changes

Render the fullName in the template

💡 Why This Matters

🌍 Real World

Combining user input fields and showing derived data is common in forms, profiles, and settings pages.

💼 Career

Understanding <code>computed</code> and <code>watch</code> is essential for Vue developers to write efficient and reactive UI code.

1

Setup reactive firstName and lastName

In the <script setup> block, import ref from 'vue' and create two reactive variables called firstName with value 'John' and lastName with value 'Doe'.

Vue

  
    Full Name: {{ fullName }}
  



// Import ref and create firstName and lastName
// Your code here

Need a hint?

Use ref to create reactive variables for firstName and lastName.

2

Add computed fullName property

Import computed from 'vue' and create a computed property called fullName that returns the combination of firstName.value and lastName.value separated by a space.

Vue

  
    Full Name: {{ fullName }}
  



import { ref, computed } from 'vue'

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

// Create computed fullName combining firstName and lastName
// Your code here

Need a hint?

Use computed to create fullName that updates automatically when firstName or lastName change.

3

Add watch to log fullName changes

Import watch from 'vue' and add a watch effect on fullName that logs the message `Full name changed to: ${newValue}` whenever fullName changes.

Vue

  
    Full Name: {{ fullName }}
  



import { ref, computed, watch } from 'vue'

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

const fullName = computed(() => `${firstName.value} ${lastName.value}`)

// Add watch on fullName to log changes
// Your code here

Need a hint?

Use watch to react to changes in fullName and log a message.

4

Complete template with input fields

Add two <input> elements bound with v-model to firstName and lastName inside the template so the user can change the names and see fullName update automatically.

Vue

  
    
    
    Full Name: {{ fullName }}
  



import { ref, computed, watch } from 'vue'

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

const fullName = computed(() => `${firstName.value} ${lastName.value}`)

watch(fullName, (newValue) => {
  console.log(`Full name changed to: ${newValue}`)
})

Need a hint?

Use v-model on inputs to bind to firstName and lastName. Add aria-label for accessibility.