Trigger and track for manual reactivity in Vue - Step-by-Step Execution

Concept Flow - Trigger and track for manual reactivity

Create reactive object

↓

Call track() to register dependency

↓

Use reactive data in effect

↓

Call trigger() to notify changes

↓

Effect re-runs with updated data

This flow shows how manual reactivity works by tracking dependencies and triggering updates when data changes.

Execution Sample

Vue

import { reactive, effect, track, trigger } from 'vue';
const state = reactive({ count: 0 });
effect(() => {
  track(state, 'count');
  console.log(state.count);
});
trigger(state, 'count');

This code manually tracks the 'count' property and triggers an effect to re-run when 'count' changes.

Execution Table

Step	Action	Evaluation	Result
1	Create reactive object 'state' with count=0	state.count = 0	state.count = 0
2	Run effect function	Calls track(state, 'count')	Dependency on state.count registered
3	Inside effect, console.log(state.count)	state.count = 0	Output: 0
4	Call trigger(state, 'count')	Notify dependencies	Effect re-runs
5	Effect re-runs, calls track(state, 'count')	Dependency re-registered	Dependency on state.count registered
6	Inside effect, console.log(state.count)	state.count = 0	Output: 0

💡 No further triggers, effect stops re-running

Variable Tracker

Variable	Start	After Step 1	After Step 4	Final
state.count	undefined	0	0	0

Key Moments - 2 Insights

Why do we need to call track() manually inside the effect?

Because manual reactivity requires explicitly registering which properties the effect depends on, as shown in steps 2 and 5 of the execution_table.

What happens when trigger() is called?

Trigger notifies all effects that depend on the changed property to re-run, as seen in step 4 where the effect re-runs.

Visual Quiz - 3 Questions

Look at the execution_table, what is output when the effect first runs?

A undefined

B 0

C 1

D Error

💡 Hint

Check step 3 in the execution_table where console.log outputs the value.

At which step does the effect re-run after trigger() is called?

A Step 5

B Step 4

C Step 2

D Step 6

💡 Hint

Look at the execution_table steps after trigger() call at step 4.

If track() was not called inside the effect, what would happen when trigger() is called?

A Error would occur

B Effect would still re-run

C Effect would not re-run

D Value would change automatically

💡 Hint

Refer to the key_moments explanation about manual dependency registration.

Concept Snapshot

Manual reactivity in Vue:
- Use track(obj, key) inside effect to register dependencies
- Use trigger(obj, key) to notify changes
- Effects re-run only when triggered
- Requires explicit calls unlike automatic reactivity

Full Transcript

This visual execution shows how manual reactivity works in Vue. First, a reactive object 'state' is created with a count property set to 0. An effect function runs and calls track(state, 'count') to register that it depends on 'count'. The effect logs the current count value, which is 0. When trigger(state, 'count') is called, it notifies the effect to re-run. The effect runs again, re-registers the dependency, and logs the count value again. Without calling track(), the effect would not know to re-run when triggered. This manual approach requires explicit tracking and triggering to update reactive effects.