011. The Watch Function
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
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.
022. Watch 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.
033. Deep 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
What is watchEffect?
`watchEffect` is a simplified version of `watch`. Instead of explicitly defining what to watch, you just provide a callback. Vue automatically tracks any reactive variables used inside the callback and re-runs it when they change. It runs immediately by default.
