Vue JS Composition API 2

Question 1

What are composables in Vue 3?

Accepted Answer

Reusable functions that encapsulate stateful logic using Composition API

Answer

Composables are functions (by convention prefixed with `use`) that use Composition API features like `ref`, `computed`, and lifecycle hooks to encapsulate and reuse logic.

Question 2

In Vue 3, where must Composition API functions like `ref`, `computed`, and lifecycle hooks be called?

Accepted Answer

Inside the `setup()` function or `<script setup>` — not inside conditionals or loops

Answer

Composition API functions must be called synchronously during component setup (not inside conditionals, loops, or async callbacks) so Vue can properly associate them with the component instance.

Question 3

What does `toRefs` do in Vue 3?

Accepted Answer

Converts a reactive object's properties into individual refs, preserving reactivity when destructured

Answer

`toRefs` converts each property of a reactive object into a separate ref, so destructuring the result maintains reactivity.

Question 4

What is the purpose of `shallowRef` in Vue 3?

Accepted Answer

Creates a ref that only triggers reactivity for the .value assignment itself, not nested property changes

Answer

`shallowRef` creates a ref where only replacing `.value` triggers updates. Mutations to nested properties of the value do NOT trigger reactivity, improving performance for large objects.

Question 5

How do you expose specific properties and methods to parent components in `<script setup>`?

Accepted Answer

Using defineExpose({ property, method })

Answer

`defineExpose` explicitly declares what a component with `<script setup>` exposes to parent components via template refs. By default, nothing is exposed.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Composition API 2