Effects and reactivity

VueJunior~2 min read

1. In short: what is an effect

Effect (reactive effect) is a function that must automatically run every time the data it depends on changes.

In other words, effect() is a "reactive observer". It remembers which data it uses and reruns when that data changes.

2. A real-life example

javascript

import { reactive, effect } from 'vue'

const state = reactive({ count: 0 })

effect(() => {
  console.log(`Count: ${state.count}`)
})

state.count++ // "Count: 1" - the effect ran again

What happens here:

On the first call to effect(), Vue runs the passed function.
When state.count is read inside the function, Vue "tracks" the dependency (through track()).
When state.count changes, trigger() is called → Vue "knows" that it needs to rerun this effect.

That's why effect = a function that automatically reacts to data changes.

3. How it works under the hood

At the core of reactivity are two functions: track() and trigger().

javascript

// Simplified model
let activeEffect = null
const targetMap = new WeakMap()

function effect(fn) {
  activeEffect = fn
  fn()                 // run and track dependencies
  activeEffect = null
}

function track(target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) targetMap.set(target, (depsMap = new Map()))
  let dep = depsMap.get(key)
  if (!dep) depsMap.set(key, (dep = new Set()))
  dep.add(activeEffect) // store the dependency
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  effects && effects.forEach(fn => fn()) // run the effects
}

The logic is simple:

effect(fn) → runs the function and remembers which properties it reads.
track() → stores the dependency between a property and an effect.
trigger() → when a property changes, calls all effects that depend on it.

4. Effects come in different types

Vue has different kinds of effects, but all of them are based on the same system:

Effect type	What it does	Example
Render effect	Updates the component if the data used in the template changed	`{{ count }}`
Watch effect	Performs side effects when data changes	`watchEffect(() => console.log(state.count))`
Computed effect	Caches the computation result, automatically recomputed when dependencies change	`const double = computed(() => count.value * 2)`

All these mechanisms (render, watch, computed) are just different "layers" on top of effect().

5. Effect and the active context

When effect(fn) runs:

Vue stores a reference to the current active effect (activeEffect).
All reactive get operations inside fn get linked to this effect.
After execution finishes, activeEffect is reset.

This is how Vue knows exactly who uses the data, and who needs to be notified when it changes.

6. How effects are tied to components

Every component in Vue has its own render effect - a function responsible for creating/updating the virtual DOM.

javascript

effect(() => {
  renderComponent(instance)
})

When the data the template depends on changes, Vue calls exactly this effect - and the component re-renders. No other components are affected.

7. Why this is efficient

Effects give Vue precise update granularity:

Vue knows exactly which data was used.
Vue knows exactly which effects depend on that data.
Vue runs only the necessary effects.

This makes the system:

Fast
Predictable
Scalable

8. Short and simple

Effect is a function that Vue automatically calls whenever any reactive data it uses changes.

9. Analogy

Think of effect() as a formula in Excel:

javascript

= A1 + B1

If A1 or B1 changes, the spreadsheet automatically recalculates the formula. You don't tell it "recalculate" - it knows the dependencies.

effect() in Vue is that same formula, just in code.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.