0Pricing
Vue Academy · Lesson

Watchers and Deep Reactivity

React to data changes with watchers and deep watching.

What Is a Watcher?

A watcher runs a function in response to a data change.

  • Unlike computed, it is for side effects
  • Fetching data, logging, saving to storage
  • You react when something specific changes

The watch Function

The watch function takes a source to watch and a callback that receives new and old values.

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

All lessons in this course

  1. Reactivity Fundamentals
  2. Computed Properties
  3. Watchers and Deep Reactivity
← Back to Vue Academy