How Vue tracks dependencies automatically - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What triggers a Vue component to re-render?

In Vue 3's Composition API, which action causes a component to automatically re-render?

Vue

import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

// When does the component update its display?

A When a reactive property like count.value changes

B When any function inside setup() is called

C Only when the component is manually refreshed

D When a non-reactive variable changes

💡 Hint

Think about what Vue watches to know when to update the UI.

Vue tracks reactive properties like ref and reactive objects. When their values change, Vue knows to re-render the component automatically.

🧠 Conceptual

intermediate

How does Vue know which properties to track?

Vue uses a special system to track dependencies. Which best describes how Vue tracks reactive properties?

A Vue wraps reactive properties with getters and setters to detect access and changes

B Vue scans the entire component code for variable names

C Vue requires manual registration of each reactive property

D Vue uses global event listeners to detect changes

💡 Hint

Think about how Vue can know when you read or write a property.

Vue uses JavaScript proxies or getters/setters to intercept property access and changes, so it can track dependencies automatically.

🔧 Debug

advanced

Why does this Vue reactive property not trigger updates?

Consider this Vue 3 code snippet. Why does changing state.count not update the template?

Vue

<script setup>
import { reactive } from 'vue';

const state = reactive({ count: 0 });

function increment() {
  state.count = state.count + 1;
}
</script>

<template>
  <button @click="increment">Increment</button>
  <p>{{ state.count }}</p>
</template>

A The reactive object is correct; the problem is elsewhere

B The template does not track reactive properties inside reactive objects

C The code is correct and will update the template as expected

D The reactive object was not created properly; it should use ref instead

💡 Hint

Check how reactive objects and templates work together in Vue 3.

Reactive objects created with reactive() are tracked by Vue, and changes to their properties trigger updates. This code works correctly.

📝 Syntax

advanced

Which code correctly creates a reactive computed property in Vue 3?

Select the code snippet that correctly defines a computed property that doubles a reactive count.

A const doubleCount = computed(() => count.value + 2);

B const doubleCount = computed(() => count.value * 2);

C const doubleCount = computed(count * 2);

D const doubleCount = computed(() => count * 2);

💡 Hint

Remember how to access the value inside a ref.

Computed properties use a function returning a value. When using ref, you must access the value with .value.

❓ state_output

expert

What is the output after these Vue reactive updates?

Given this Vue 3 code, what is the final value of message.value after calling update()?

Vue

import { ref, watch } from 'vue';

const count = ref(0);
const message = ref('Start');

watch(count, (newVal) => {
  message.value = `Count is ${newVal}`;
});

function update() {
  count.value = 1;
  count.value = 2;
}

update();

A "Count is 1"

B "Start"

C An error is thrown

D "Count is 2"

💡 Hint

Think about how Vue batches reactive updates and when watchers run.

Vue batches reactive updates in the same tick. The watcher runs after all changes, so message.value reflects the last count value, 2.

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