Trigger and track for manual reactivity in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding manual reactivity triggers in Vue

In Vue 3, when using signal for manual reactivity, which method is used to notify Vue that a signal's value has changed and should update the UI?

A signal.notify()

B signal.trigger()

C signal.value = newValue

D signal.track()

💡 Hint

Think about the method that explicitly tells Vue to update when the value changes.

The trigger() method is used to manually notify Vue that the signal's value has changed, causing dependent computations or components to update.

❓ query_result

intermediate

Result of tracking a signal in Vue

Given the following Vue code snippet, what is the output of console.log(count.value) after increment() is called?

import { signal, effect } from '@vue/reactivity';
const count = signal(0);
function increment() {
  count.value++;
  count.trigger();
}
effect(() => {
  console.log('Count is:', count.value);
});
increment();

A No output

B Count is: undefined

C Count is: 0

D Count is: 1

💡 Hint

Consider how the signal value changes and triggers effects.

The increment() function increases count.value from 0 to 1 and calls count.trigger(), which causes the effect to run and log 'Count is: 1'.

📝 Syntax

advanced

Identify the syntax error in manual signal tracking

Which option contains a syntax error when trying to manually track a signal's dependencies in Vue?

import { signal } from '@vue/reactivity';
const state = signal(5);
function read() {
  track(state);
  return state.value;
}

A Using <code>track(state)</code> inside the function

B Defining <code>state</code> as a signal with initial value 5

C Accessing <code>state.value</code> to read the signal

D Importing <code>track</code> from '@vue/reactivity'

💡 Hint

Check if track is a valid function to call directly.

Vue's reactivity API does not expose a direct track() function to call manually. Tracking happens automatically when reading state.value inside reactive contexts.

❓ optimization

advanced

Optimizing manual reactivity with signals

You want to optimize a Vue component that uses a signal to track a large list. Which approach best reduces unnecessary updates?

A Call <code>listSignal.trigger()</code> after every item change

B Avoid using signals and use plain arrays instead

C Use a computed signal that depends on filtered items and trigger only when filters change

D Replace the entire list with a new array and call <code>trigger()</code>

💡 Hint

Think about minimizing updates by tracking only relevant changes.

Using a computed signal that depends on filters and triggering updates only when filters change reduces unnecessary recomputations and UI updates.

🔧 Debug

expert

Debugging missing UI updates with manual triggers

In this Vue code, the UI does not update after changing count.value. What is the cause?

import { signal, effect } from '@vue/reactivity';
const count = signal(0);
function increment() {
  count.value++;
  // missing trigger call here
}
// effect to log count
effect(() => {
  console.log('Count:', count.value);
});
increment();

A The <code>increment</code> function does not call <code>count.trigger()</code>

B The signal was not created properly

C The effect is not defined correctly

D The signal value cannot be incremented directly

💡 Hint

Check what is needed to notify Vue about changes in manual reactivity.

Without calling count.trigger(), Vue does not know the signal changed, so the effect does not run and the UI does not update.