ref & reactive — Series 3

Preview — 3 of 10 questions

What happens when this runs?

javascript
import { ref, computed } from 'vue'

const price = ref(10)
const formatted = computed(() => `$${price.value}`)

formatted.value = '$99'
AA basic computed(getter) (no set) is read-only — Vue logs a console warning in development ("Write operation failed: computed value is readonly") and the assignment is a no-op; formatted.value still reflects $${price.value}
BIt throws a TypeError immediately and stops the script
Cformatted.value becomes '$99', overriding the computed function until price changes again
DIt silently redefines formatted as a plain ref, detaching it from price entirely

Is this valid, and how does it behave?

javascript
import { ref } from 'vue'

const user = ref({ name: 'Ada', age: 30 })
user.value.age++
AInvalid — ref() only accepts primitive values like numbers and strings; objects must always use reactive()
BValid, but user.value.age++ doesn't trigger reactivity — only reassigning user.value entirely does
CValid, but accessing user.value.age requires user.value.value.age because of double-wrapping
DValid — ref() accepts any value, including objects. When given an object, Vue internally wraps it with the same reactive-proxy logic reactive() uses, so user.value.age++ mutates and triggers reactivity exactly like a reactive() object's property would

Why does this fail to do what might be expected?

javascript
import { reactive } from 'vue'

const count = reactive(0)
count++ // ???
AIt works exactly like ref(0) — reactive() accepts primitives too and wraps them the same way
Breactive() only works meaningfully on objects, arrays, and other collection types — passing a primitive like 0 returns the primitive back unchanged (Vue also logs a dev warning), so count is just a plain, non-reactive number and count++ is ordinary JavaScript with no reactivity involved
CIt throws a TypeError: reactive() requires an object at the call site
Dreactive(0) returns NaN

Sign up free to play

Answer all 10 questions (7 more), see explanations for every answer, and track your score.