Shallow ref and shallow reactive in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a shallow reactive object in Vue.

Vue

import { [1] } from 'vue';

const state = [1]({ count: 0, nested: { value: 10 } });

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

Aref

Breactive

CshallowRef

DshallowReactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' instead of 'shallowReactive' causes deep reactivity.

Using 'ref' creates a reactive reference, not an object.

Using 'shallowRef' creates a shallow reactive reference, not an object.

Use shallowReactive to create a reactive object where only the root level is reactive, not nested properties.

2fill in blank

medium

Complete the code to create a shallow ref in Vue.

Vue

import { [1] } from 'vue';

const count = [1](0);

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

AshallowRef

BshallowReactive

Creactive

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ref' creates a deep reactive reference.

Using 'reactive' is for objects, not refs.

Using 'shallowReactive' is for objects, not refs.

shallowRef creates a reactive reference where the inner value is not deeply reactive.

3fill in blank

hard

Fix the error in the code to correctly create a shallow reactive object.

Vue

import { [1] } from 'vue';

const data = [1]({ user: { name: 'Alice' } });

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

AshallowReactive

Breactive

CshallowRef

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving 'reactive' causes nested properties to be reactive.

Using 'ref' or 'shallowRef' is incorrect for objects.

Replace reactive with shallowReactive to make only the root level reactive.

4fill in blank

hard

Fill both blanks to create a shallow ref and access its value correctly.

Vue

import { [1] } from 'vue';

const count = [1](0);

console.log(count.[2]);

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

AshallowRef

Bvalue

Ccount

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ref' instead of 'shallowRef' changes reactivity depth.

Accessing the ref directly without '.value' causes errors.

Use shallowRef to create the ref and access its inner value with .value.

5fill in blank

hard

Fill all three blanks to create a shallow reactive object and update a nested property.

Vue

import { [1] } from 'vue';

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

state.nested.[2] = 5;

console.log(state.nested.[3]);

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

AshallowReactive

Bcount

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' instead of 'shallowReactive' changes reactivity depth.

Using different property names causes undefined errors.

Use shallowReactive to create the object. Then update and access the nested count property.