HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///
Total XP: 0|💻 vuejs XP: 0

Watchers in Vue.js

Learn about Watchers in this comprehensive Vue.js tutorial. Understand the watch API, when to use it over computed properties, and advanced options like deep and immediate.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

React to state changes with custom side effects.

1The Watch Function

While computed properties allow us to declaratively compute derived values, there are cases where we need to perform 'side effects' in reaction to state changes - for example, mutating the DOM, or fetching data from an async API based on the result of an operation.

2Watch Sources

watch's first argument can be different types of reactive 'sources': it can be a ref (including computed refs), a reactive object, a getter function, or an array of multiple sources. Remember to use a getter () => obj.prop for specific properties of reactive objects.

3Deep and Immediate Watchers

By default, watchers are lazy. Use { immediate: true } to force the callback to run immediately. Also, watching a ref containing an object does not trigger on deep mutations unless you use { deep: true }.

?Frequently Asked Questions

Pascual Vila

Pascual Vila

Frontend Instructor // Code Syllabus

Continue Learning