What Is a Reactive Effect in Vue?

In Vue, a "reactive effect" is a function that runs automatically in response to data changes. The concept is the basis of Vue's reactivity system. Its main characteristics:

1. Reactive data: Vue manages an application's data model reactively — when a piece of data changes, Vue notices.
2. Effect functions: functions that run in response to data changes, for example triggering DOM updates or calculations when a value changes.
3. Dependency tracking: Vue tracks which reactive data triggers which effects, so when a value changes only the effects that depend on it run.
4. Automatic re-runs: when a value changes, Vue re-runs the related effects automatically, keeping data and user interface in sync.
5. Ease of use: Vue makes this system transparent for developers; most of them build applications without thinking about how it works inside.

In short, reactive effects are the mechanism that lets a Vue application respond to data changes smartly and efficiently, which makes dynamic, interactive applications easier to build. Components' rendering, computed properties and watchEffect are all reactive effects; see What Is effect in Vue? for a runnable example.