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.