Vue.js: Watchers: watch

// ❌ The broken version: a request per character
const { ref } = Vue

const searchQuery = ref('')

watch(searchQuery, async (newValue) => {
  // Send a request on every keystroke
  const results = await fetch(`/api/search?q=${newValue}`)
  searchResults.value = await results.json()
})

const { ref, watch } = Vue

const searchQuery = ref('')
const searchResults = ref([])

// Debounce: only request if the value stays unchanged for 300ms
let timeoutId = null
watch(searchQuery, (newValue) => {
  if (timeoutId) clearTimeout(timeoutId)
  timeoutId = setTimeout(async () => {
    const response = await fetch(`/api/search?q=${newValue}`)
    searchResults.value = await response.json()
  }, 300)
})

const { ref, watch } = Vue

const count = ref(0)

watch(
  // 1. Source: the reactive data to watch
  count,
  // 2. Callback: (new value, old value) => {...}
  (newVal, oldVal) => {
    console.log(`count: ${oldVal} → ${newVal}`)
  },
  // 3. Options (optional): immediate, deep, flush
  { immediate: true, deep: true }
)

const count = ref(0)

// Watch a ref
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} → ${newVal}`)
})

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

// Watch several sources
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`Name: ${newFirst} ${newLast}`)
})

A number input starting at 0.
Changing it to 5 prints Count changed: 0 → 5 in the console and updates Count: 5 on the page.

Count: 0
Check the console for the change log

console: Count changed: 0 → 5

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} → ${newVal}`)
})

const { reactive, watch } = Vue

const user = reactive({ name: 'Alice', age: 25 })

// Watch the whole reactive object (deep automatically)
watch(user, (newVal, oldVal) => {
  console.log('User changed:', newVal)
})

// ✅ Mutating a nested property also triggers it
user.name = 'Bob'  // triggers

const state = reactive({ user: { profile: { name: 'Alice' } } })

// Watch only a specific property (precise control)
watch(
  () => state.user.profile.name,
  (newVal) => {
    console.log(`Name: ${newVal}`)
  }
)

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

watch(doubleCount, (newVal) => {
  console.log(`Double: ${newVal}`)
})

Starts at Name: Alice, Age: 25, Theme: dark, Changes: 0.
Clicking Rename to Bob changes the name and Changes becomes 1;
clicking Switch to light changes the theme and Changes becomes 2.

Name: Bob
Age: 25
Theme: light
Changes: 2

const { ref, watchEffect } = Vue

const count = ref(0)
const name = ref('Alice')

// No source to name: reactive data used in the body is tracked automatically
watchEffect(() => {
  console.log(`count: ${count.value}, name: ${name.value}`)
  // Reruns when count changes
  // Also reruns when name changes
})

const { watchEffect, onCleanup } = Vue

watchEffect((onCleanup) => {
  // Set up timers, subscriptions, event listeners
  const timer = setInterval(() => {
    console.log('tick')
  }, 1000)
  
  // Cleanup: called before the next run or when the component unmounts
  onCleanup(() => {
    clearInterval(timer)
  })
})

effect runs: 1 on load.
Each click on count++ or Rename to Bob reruns the effect, so the counter goes 2, 3, 4… while the page shows the new count and name.

count: 1
name: Bob
effect runs: 3

const count = ref(0)

// Default: only fires when count changes
watch(count, (newVal) => console.log(newVal))  // does not run immediately

// immediate: true: fire once right away
watch(count, (newVal) => console.log(newVal), { immediate: true })
// ✅ Runs immediately: 0 → 0

const { ref, watch } = Vue

const user = ref({ profile: { name: 'Alice' } })

// Default: only triggers when the ref's .value is replaced as a whole
watch(user, () => console.log('changed'))  // ❌ user.value.profile.name = 'Bob' does not trigger

// deep: true: nested property changes trigger too
watch(user, () => console.log('changed'), { deep: true })
// ✅ user.value.profile.name = 'Bob' triggers

// Default 'pre': fires before the component updates
watch(source, fn, { flush: 'pre' })

// 'post': fires after the component updates (the DOM is already updated)
watch(source, fn, { flush: 'post' })

// 'sync': fires synchronously (rarely used, poor performance)
watch(source, fn, { flush: 'sync' })

Typing "iphone" quickly shows Recent query: (empty) at first;
300ms after you stop typing it becomes Recent query: iphone and Triggers increments by 1 instead of 6.

Recent query: iphone
Triggers: 1