Sample questions
Vue Reactivity SystemDifficulty 1
In Vue 3's Composition API, how do you read the current value of a ref?
- aAccess it directly, refs behave like plain variables
- bAccess its
.value property✓ - cCall it as a function:
myRef() - dUse
myRef.get()
Explanation:ref() wraps a value in an object with a single reactive .value property. Outside of <template> (where Vue auto-unwraps top-level refs), you must read/write through .value in plain JavaScript/<script setup> code.
Vue Reactivity SystemDifficulty 1
When you make an object reactive with reactive({ count: 0 }), how do you read the count property?
- aDirectly,
state.count, no .value needed✓ - bThrough
.value: state.value.count - cThrough a getter method:
state.getCount() - dYou must destructure it first
Explanation:reactive() returns a Proxy around the object itself, not a wrapper with .value. Properties are accessed and mutated directly, just like a plain object.
Vue Reactivity SystemDifficulty 1
Which value type is ref() generally recommended for, compared to reactive()?
- aOnly arrays
- bOnly DOM elements
- cPrimitives, though it also works for objects✓
- dOnly functions
Explanation:reactive() only works on objects/arrays/Maps/Sets (its Proxy-based tracking needs a target object) — it can't make a primitive like a number reactive on its own. ref() works for any value type, which is why it's the general-purpose default, especially for primitives.
Vue Reactivity SystemDifficulty 1
By default, is the value returned by computed(() => ...) writable?
- aYes, always, exactly like a
ref - bOnly inside
<template> - cOnly if wrapped in
reactive() - dNo, a plain getter computed is read-only✓
Explanation:computed(getter) produces a read-only ref; assigning to its .value in dev mode logs a warning and has no effect. To make it writable, you pass an object with get/set instead of a bare getter function.
Vue Reactivity SystemDifficulty 1
In a <template> block, do you need to write .value to use a top-level ref declared in <script setup>?
- aYes, always
- bNo, top-level refs auto-unwrap in templates✓
- cOnly for refs holding objects
- dOnly for refs holding primitives
Explanation:Vue's template compiler automatically unwraps refs that are top-level bindings exposed from <script setup> — you write {{ count }}, not {{ count.value }}. In general, nested object properties are not auto-unwrapped in templates, although a ref that is the final value of a text interpolation is unwrapped as a special case. Auto-unwrapping also does not apply in plain JavaScript.
Vue Reactivity SystemDifficulty 1
What is the minimum required argument for watch() to observe a single reactive source?
- aOnly a callback function — Vue infers the source automatically
- bA CSS selector string identifying the DOM element
- cA source to watch plus a callback function✓
- dNothing —
watch() observes the whole component automatically
Explanation:watch(source, callback) requires you to explicitly specify what to watch — a ref, a reactive object property accessed via a getter function, or an array of sources — unlike watchEffect, which auto-tracks whatever reactive state it reads inside its callback.