Vue JS Vue JS Reactivity System

Question 1

Which Vue 3 API function creates a deeply reactive object from a plain JavaScript object?

Accepted Answer

reactive()

Answer

reactive() wraps a plain object in a Proxy to make all nested properties deeply reactive.

Question 2

What does ref() return in Vue 3?

Accepted Answer

A reactive reference object with a .value property

Answer

ref() returns a reactive reference object where the actual value is accessed via the .value property.

Question 3

Which function creates a reactive reference that only tracks the top-level property and does not deeply convert nested objects?

Accepted Answer

shallowReactive()

Answer

shallowReactive() makes only the root-level properties of an object reactive, leaving nested objects non-reactive.

Question 4

What is the purpose of toRef() in Vue 3?

Accepted Answer

Create a ref linked to a property of a reactive object

Answer

toRef() creates a ref that is linked to a specific property of a reactive object, preserving the reactive connection.

Question 5

When does Vue's reactivity system NOT track a change automatically?

Accepted Answer

Directly assigning a new index to a raw array outside reactive()

Answer

Direct index assignment on a raw (non-reactive) array bypasses Vue's Proxy, so changes are not tracked.

Vue JS Practice Test