Trigger and track for manual reactivity in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive reference in Vue.

Vue

const count = [1](0);

Drag options to blanks, or click blank then click option'

Aref

Bcomputed

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values.

Use ref to create a reactive reference for a primitive value like a number.

2fill in blank

medium

Complete the code to manually trigger reactivity on a ref.

Vue

import { ref, [1] } from 'vue';

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

[1](state);

Drag options to blanks, or click blank then click option'

AtriggerRef

BtoRefs

CmarkRaw

DshallowReactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using toRefs or markRaw instead of triggerRef.

triggerRef is used to manually trigger reactivity on a ref.

3fill in blank

hard

Fix the error in the code to track manual reactivity correctly.

Vue

import { ref, [1] } from 'vue';

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

function increment() {
  [1](state);
  state.value.count++;
}

Drag options to blanks, or click blank then click option'

AwatchEffect

BtriggerRef

CmarkRaw

DtrackRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using triggerRef instead of trackRef for tracking.

trackRef is used to track manual reactivity dependencies, which is missing here.

4fill in blank

hard

Fill both blanks to create a ref and manually trigger its update.

Vue

import { [1], [2] } from 'vue';

const state = [1]({ count: 0 });

function update() {
  state.value.count++;
  [2](state);
}

Drag options to blanks, or click blank then click option'

Areactive

BtriggerRef

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for the object.

Use ref to create the ref and triggerRef to manually trigger updates.

5fill in blank

hard

Fill all three blanks to track and trigger manual reactivity on a ref.

Vue

import { [1], [2], [3] } from 'vue';

const count = [1](0);

function manualUpdate() {
  [2](count);
  count.value++;
  [3](count);
}

Drag options to blanks, or click blank then click option'

Aref

BtrackRef

CtriggerRef

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for primitive values.

Create a ref with ref, track dependencies with trackRef, and trigger updates with triggerRef.