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

Creates a DOM reference

Answer

Registers a component reference

Answer

Binds a template variable

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` is for templates only; `reactive` is for scripts

Answer

`reactive` requires a type annotation; `ref` does not

Answer

`ref` is deprecated in Vue 3.4+

Question 3

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

Accepted Answer

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

Answer

this.$watch('count', callback)

Answer

computed(() => count.value)

Answer

onMounted(() => { trackCount(count) })

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` is synchronous; `watch` is asynchronous

Answer

`watch` is for templates; `watchEffect` is for scripts

Answer

`watchEffect` only works with computed values

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

A function that must be called to get the value

Answer

A reactive object with multiple properties

Answer

A Promise resolving to the computed value

Question 6

What is `provide` and `inject` used for in Vue 3?

Accepted Answer

To pass data from ancestor to descendant components without prop drilling

Answer

To share state between sibling components

Answer

To inject external services into components

Answer

To provide CSS styles to child components