Vue JS Vue JS Reactivity System 1 — Questions and Answers
Question 1: Which Vue 3 API function creates a deeply reactive object from a plain JavaScript object?
- reactive() (Correct answer)
- ref()
- computed()
- shallowRef()
Correct answer: reactive()
reactive() wraps a plain object in a Proxy to make all nested properties deeply reactive.
Question 2: What does ref() return in Vue 3?
- A plain JavaScript object
- A reactive reference object with a .value property (Correct answer)
- A computed property
- A shallow reactive object
Correct answer: A reactive reference object with a .value property
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?
- ref()
- reactive()
- shallowReactive() (Correct answer)
- toRef()
Correct answer: shallowReactive()
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?
- Convert a ref to a reactive object
- Create a ref linked to a property of a reactive object (Correct answer)
- Deep-clone a reactive object
- Disable reactivity on a value
Correct answer: Create a ref linked to a property of a reactive object
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?
- Setting a property on a reactive object
- Replacing a ref's .value
- Directly assigning a new index to a raw array outside reactive() (Correct answer)
- Pushing to a reactive array
Correct answer: Directly assigning a new index to a raw array outside reactive()
Direct index assignment on a raw (non-reactive) array bypasses Vue's Proxy, so changes are not tracked.
Question 6: Which composable utility converts all properties of a reactive object into individual refs?
- toRefs() (Correct answer)
- toRef()
- unref()
- isReactive()
Correct answer: toRefs()
toRefs() destructures a reactive object into individual refs while maintaining the reactive connection for each property.
Vue JS Vue JS Reactivity System 1
Which Vue 3 API function creates a deeply reactive object from a plain JavaScript object?