Vue JS Composition API

Question 1

What does the `ref` function do in Vue 3 Composition API?

Accepted Answer

Creates a reactive reference to a value, accessed via .value

Answer

`ref` wraps any value (primitive or object) in a reactive container accessible via `.value`, enabling Vue to track changes and update the DOM.

Question 2

What is the difference between `ref` and `reactive` in Vue 3?

Accepted Answer

`ref` works with any value and uses .value; `reactive` creates a deep reactive proxy of an object

Answer

`ref` wraps any value in a single-property object (.value), while `reactive` creates a Proxy that makes all properties of an object deeply reactive without .value.

Question 3

How do you watch a reactive value for changes in Vue 3 Composition API?

Accepted Answer

watch(count, (newVal, oldVal) => { ... })

Answer

The `watch` function from Vue 3 Composition API observes a reactive source (ref, computed, getter function, or reactive object) and calls the callback when it changes.

Question 4

What is `watchEffect` and how does it differ from `watch`?

Accepted Answer

`watchEffect` automatically tracks its reactive dependencies and re-runs; `watch` requires explicit source declaration

Answer

`watchEffect` runs the callback immediately and automatically tracks any reactive values accessed inside it, re-running when they change. `watch` requires explicit sources.

Question 5

What does `computed` return in Vue 3 Composition API?

Accepted Answer

A read-only ref whose value is lazily evaluated and cached until its dependencies change

Answer

`computed` returns a read-only ref. The getter runs lazily and caches the result, only re-evaluating when reactive dependencies change.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Composition API