How Vue tracks dependencies automatically - Visual Walkthrough

Concept Flow - How Vue tracks dependencies automatically

Component renders

↓

Access reactive property

↓

Vue records dependency

↓

Reactive property changes

↓

Vue triggers update

↓

Component re-renders

Vue tracks which reactive properties a component uses during rendering, then updates the component automatically when those properties change.

Execution Sample

Vue

import { ref, effect } from 'vue'
const count = ref(0)
effect(() => {
  console.log(`Count is: ${count.value}`)
})
count.value++

This code creates a reactive count, logs it reactively, and updates count to trigger reactivity.

Execution Table

Step	Action	Reactive Property Accessed	Dependency Recorded	Effect Triggered	Output
1	Run effect callback	count.value	count tracked as dependency	No	Count is: 0
2	Increment count.value	count.value	No new dependency	Yes	Count is: 1
3	Effect re-runs due to change	count.value	No new dependency	No	Count is: 1

💡 No further changes to reactive properties, so no more effects triggered.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
count.value	0	0	1	1

Key Moments - 3 Insights

Why does Vue track dependencies only during the effect callback?

Vue records dependencies when reactive properties are accessed inside the effect callback (see Step 1 in execution_table). This way, it knows exactly which properties to watch for changes.

What triggers the effect to run again?

Changing a reactive property like count.value (Step 2) triggers Vue to rerun the effect because it knows that property is a dependency (Step 3).

Does Vue track dependencies outside the effect callback?

No, dependencies are only tracked during the effect callback execution, so accessing reactive properties elsewhere does not register dependencies.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of count.value after Step 2?

A 2

B 0

C 1

D undefined

💡 Hint

Check the variable_tracker row for count.value after Step 2.

At which step does Vue record count as a dependency?

A Step 1

B Step 2

C Step 3

D No step records it

💡 Hint

Look at the 'Dependency Recorded' column in execution_table.

If we did not access count.value inside the effect, what would happen?

A count would still be tracked as dependency

B Effect would run but not react to count changes

C Effect would never run

D Effect would run and track all reactive properties

💡 Hint

Think about how Vue tracks dependencies only when reactive properties are accessed during effect.

Concept Snapshot

Vue tracks dependencies automatically by recording which reactive properties are accessed during a component's render or effect callback.
When those properties change, Vue triggers updates to re-run the render or effect.
This automatic tracking means you don't manually specify dependencies.
Reactive properties are wrapped with getters/setters to detect access and changes.
Effects run once to collect dependencies, then re-run only when those dependencies change.

Full Transcript

Vue automatically tracks dependencies by watching which reactive properties a component or effect accesses during execution. When you create a reactive property using ref or reactive, Vue wraps it so it can detect when you read or write it. When an effect or component renders, Vue records all reactive properties accessed as dependencies. Later, if any of those properties change, Vue triggers the effect or component to re-run, updating the UI or logic. This process happens behind the scenes, so you only write your code naturally without manually listing dependencies. The example code shows a reactive count variable and an effect that logs it. When count.value changes, the effect runs again automatically.