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.

Practice

1. How does Vue automatically know which parts of your app to update when data changes?

easy

A. Vue updates everything on the page every time any data changes.

B. You must manually list all variables Vue should watch for changes.

C. Vue uses a timer to check for changes every second.

D. Vue tracks reactive data dependencies during rendering using ref and computed.

Solution

1. Step 1: Understand Vue's reactive system

   Vue uses special reactive data wrappers like ref and computed to track dependencies automatically.

2. Step 2: How Vue tracks dependencies

   When rendering, Vue records which reactive data is accessed, so it knows what to update when data changes.

3. Final Answer:

   Vue tracks reactive data dependencies during rendering using ref and computed. -> Option D

4. Quick Check:

   Automatic dependency tracking = Vue tracks reactive data dependencies during rendering using ref and computed. [OK]

Hint: Vue tracks reactive data accessed during rendering [OK]

Common Mistakes:

• Thinking you must manually specify dependencies
• Believing Vue updates everything on any change
• Assuming Vue uses timers to detect changes

2. Which of the following is the correct way to create a reactive reference in Vue 3?

easy

A. const count = reactive(0);

B. const count = ref(0);

C. const count = computed(0);

D. const count = watch(0);

Solution

1. Step 1: Identify the correct reactive API

   In Vue 3, ref is used to create a reactive reference to a primitive value like a number.

2. Step 2: Check other options

   reactive is for objects, computed creates derived values, and watch observes changes but does not create reactive data.

3. Final Answer:

   const count = ref(0); -> Option B

4. Quick Check:

   Reactive primitive = ref() = const count = ref(0); [OK]

Hint: Use ref() for reactive primitives in Vue 3 [OK]

Common Mistakes:

• Using reactive() for primitive values
• Confusing computed() with ref()
• Trying to use watch() to create reactive data

3. Consider this Vue 3 code:

const count = ref(0);
const double = computed(() => count.value * 2);

console.log(double.value);
count.value = 5;
console.log(double.value);

What will be printed in the console?

medium

A. 0 and 10

B. 0 and 0

C. NaN and 10

D. 5 and 10

Solution

1. Step 1: Initial value of count and double

   Initially, count.value is 0, so double.value is 0 * 2 = 0.

2. Step 2: After updating count

   When count.value changes to 5, double automatically recalculates to 5 * 2 = 10.

3. Final Answer:

   0 and 10 -> Option A

4. Quick Check:

   Computed updates with reactive changes = 0 and 10 [OK]

Hint: Computed updates automatically when dependencies change [OK]

Common Mistakes:

• Expecting double to stay 0 after count changes
• Confusing initial and updated values
• Not accessing .value on refs

4. What is wrong with this Vue 3 code snippet?

const count = ref(0);
const double = computed(() => count * 2);

console.log(double.value);

medium

A. computed cannot be used with ref values.

B. ref should be reactive instead.

C. You must use count.value inside computed, not count directly.

D. You need to call double() instead of double.value.

Solution

1. Step 1: Check how ref is accessed inside computed

   Refs store their value inside a .value property, so you must use count.value to get the number.

2. Step 2: Identify the error

   The code uses count directly, which is a ref object, not the number, causing wrong behavior.

3. Final Answer:

   You must use count.value inside computed, not count directly. -> Option C

4. Quick Check:

   Access ref with .value inside computed = You must use count.value inside computed, not count directly. [OK]

Hint: Always use .value to access ref inside computed [OK]

Common Mistakes:

• Using ref variable directly without .value
• Thinking computed can't use ref
• Calling computed like a function instead of .value

5. You want to create a Vue 3 component that shows a list of items and a count of how many items have a price over 10. Which approach correctly uses Vue's automatic dependency tracking?

hard

A. Use a computed property that filters the reactive items array and returns the count of items with price > 10.

B. Manually watch the items array and update a separate count variable whenever items change.

C. Use a method that counts items with price > 10 and call it only once on component mount.

D. Store the count as a normal variable and update it inside the template.

Solution

1. Step 1: Understand reactive data and computed

   A reactive array wrapped with ref or reactive can be used inside a computed property to automatically track dependencies.

2. Step 2: Why computed is best here

   The computed property recalculates the count whenever the items array changes, so the UI stays updated without manual intervention.

3. Final Answer:

   Use a computed property that filters the reactive items array and returns the count of items with price > 10. -> Option A

4. Quick Check:

   Computed auto-updates with reactive data = Use a computed property that filters the reactive items array and returns the count of items with price > 10. [OK]

Hint: Use computed to auto-update counts from reactive arrays [OK]

Common Mistakes:

• Manually watching and updating counts instead of computed
• Using methods that don't auto-update
• Trying to update counts inside template variables