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.

Practice

1. What is the main purpose of using track and trigger in Vue's manual reactivity system?

easy

A. To handle HTTP requests inside Vue components.

B. To automatically update the UI without any developer intervention.

C. To create new Vue components dynamically.

D. To manually control when Vue updates the UI by tracking dependencies and triggering updates.

Solution

1. Step 1: Understand manual reactivity concept

   Manual reactivity allows developers to decide when Vue should update the UI instead of automatic updates.

2. Step 2: Role of track and trigger

   track watches properties for changes, and trigger notifies Vue to update dependents when changes occur.

3. Final Answer:

   To manually control when Vue updates the UI by tracking dependencies and triggering updates. -> Option D

4. Quick Check:

   Manual reactivity = control updates [OK]

Hint: Remember: track watches, trigger updates UI manually [OK]

Common Mistakes:

• Thinking Vue updates UI automatically without manual triggers
• Confusing track/trigger with component creation
• Assuming track triggers updates directly

2. Which of the following is the correct syntax to import track and trigger from Vue's reactivity package?

easy

A. import { track, trigger } from 'vue';

B. import track, trigger from 'vue';

C. import { track, trigger } from '@vue/reactivity';

D. import * as reactivity from 'vue';

Solution

1. Step 1: Identify correct import source

   The manual reactivity APIs track and trigger are exported from '@vue/reactivity', not directly from 'vue'.

2. Step 2: Correct import syntax

   Using named imports with curly braces is required: import { track, trigger } from '@vue/reactivity';

3. Final Answer:

   import { track, trigger } from '@vue/reactivity'; -> Option C

4. Quick Check:

   Correct import = import { track, trigger } from '@vue/reactivity'; [OK]

Hint: Use curly braces and '@vue/reactivity' for manual reactivity imports [OK]

Common Mistakes:

• Importing from 'vue' instead of '@vue/reactivity'
• Missing curly braces for named imports
• Using default import syntax incorrectly

3. Given the following code snippet, what will be logged to the console?

import { reactive, effect, track, trigger } from '@vue/reactivity';

const state = { count: 0 };

effect(() => {
  track(state, 'count');
  console.log('Count is:', state.count);
});

state.count = 1;
trigger(state, 'count');

medium

A. Count is: 0
Count is: 1

B. Count is: 0

C. Count is: 1

D. No output

Solution

1. Step 1: Initial effect run and tracking

   The effect runs once initially, calling track(state, 'count') and logging 'Count is: 0'.

2. Step 2: State change and manual trigger

   When state.count is set to 1, Vue does not update automatically because manual tracking is used. Calling trigger(state, 'count') manually runs the effect again, logging 'Count is: 1'.

3. Final Answer:

   Count is: 0 Count is: 1 -> Option A

4. Quick Check:

   Manual trigger causes effect rerun [OK]

Hint: Manual trigger reruns effect, so both old and new logged [OK]

Common Mistakes:

• Assuming automatic update without trigger
• Expecting only one log line
• Confusing track with trigger

4. Identify the error in this Vue manual reactivity code snippet:

import { reactive, effect, track, trigger } from '@vue/reactivity';

const state = { value: 10 };

effect(() => {
  track(state.value);
  console.log('Value:', state.value);
});

state.value = 20;
trigger(state, 'value');

medium

A. track is called with a property value instead of the target object and key.

B. trigger is missing after state.value update.

C. effect should not be used with manual reactivity.

D. reactive is not imported correctly.

Solution

1. Step 1: Check track usage

   track requires two arguments: the reactive target object and the property key as a string. Here, track(state.value) passes only the value (number 10), which is incorrect.

2. Step 2: Correct usage of track

   The correct call is track(state, 'value') to track the 'value' property on the reactive object.

3. Final Answer:

   track is called with a property value instead of the target object and key. -> Option A

4. Quick Check:

   track needs (object, key) [OK]

Hint: track needs object and key, not the property value [OK]

Common Mistakes:

• Passing property value instead of object and key to track
• Forgetting to trigger after state change
• Misusing effect with manual reactivity

5. You want to optimize a Vue app by manually controlling reactivity for a large object data. Which approach correctly tracks and triggers updates only for the status property when it changes?

hard

A. Use effect(() => console.log(data.status)) without manual track or trigger.

B. Call track(data, 'status') inside the effect and call trigger(data, 'status') after updating data.status.

C. Call track(data) without property and call trigger(data) after any update.

D. Update data.status and rely on Vue's automatic reactivity without track or trigger.

Solution

1. Step 1: Manual tracking of specific property

   To optimize, track only the 'status' property by calling track(data, 'status') inside the effect watching it.

2. Step 2: Trigger update after changing property

   After updating data.status, call trigger(data, 'status') to notify dependents and update UI.

3. Final Answer:

   Call track(data, 'status') inside the effect and call trigger(data, 'status') after updating data.status. -> Option B

4. Quick Check:

   Track and trigger specific property for manual reactivity [OK]

Hint: Track and trigger only changed property for best performance [OK]

Common Mistakes:

• Tracking or triggering entire object instead of property
• Relying on automatic reactivity when manual control is needed
• Not triggering after property update