ref & reactive

Preview — 3 of 10 questions

What is the correct way to declare a reactive counter variable using the Composition API in Vue 3?

javascript

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1

Aconst count = ref(0)

Bconst count = reactive(0)

Cconst count = computed(0)

Dconst count = useState(0)

Which statement correctly describes the difference between ref and reactive in Vue 3?

javascript

import { ref, reactive } from 'vue'

const count = ref(0)         // primitive — count.value = 0
const user = reactive({      // object — user.name, user.age
  name: 'Alice',
  age: 30
})

// ref with object internally uses reactive
const userRef = ref({ name: 'Bob' })
userRef.value.name = 'Charlie' // works — still reactive

Aref is for objects, reactive is for primitives

Bref works for any type but wraps value in .value; reactive only works with objects/arrays

Creactive is deprecated in Vue 3; only ref should be used

DBoth ref and reactive work identically for all types

How do you create a computed property in the Composition API?

javascript

import { ref, computed } from 'vue'

const count = ref(5)
const double = computed(() => count.value * 2)

console.log(double.value) // 10
count.value = 10
console.log(double.value) // 20 — automatically recalculated

Aconst double = computed(() => count * 2)

Bconst double = computed(() => count.value * 2)

Cconst double = watch(() => count.value * 2)

Dconst double = ref(() => count.value * 2)

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