Chapter quiz · Composition API & Reactivity

Test what you learned.

8 questions on Composition API & Reactivity. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Composition API & Reactivity — Chapter Quiz

Eight questions on script setup, props/emits, lifecycle, composables, and refs deep dive.

0/ 9

Question 1
1
What is the right way to declare typed props in <script setup lang="ts">?
AdefineProps({ name: String })BdefineProps<{ name: string }>()Cprops: { name: String }D@Prop() name: string
The generic form defineProps<...>() gives you full TS types without runtime declarations.
Question 2
2
Which macro emits a typed event from a script-setup component?
AdefineEmitsB$emitCuseEmitDemitDefine
const emit = defineEmits<{ save: [User] }>() declares and types the events your component can emit.
Question 3
3
What runs in onMounted(cb)?
Acb fires before the component is createdBcb fires once after the component is inserted into the DOMCcb fires every renderDcb fires when the component unmounts
onMounted fires once after the component is in the DOM — perfect for first fetches or imperative DOM work.
Question 4
4
A composable is best described as:
AA class with reactive propertiesBA .vue file with <script setup>CA function that uses Vue reactivity APIs to encapsulate logicDA renderless component
Composables are plain functions that wrap Composition API primitives (ref, computed, watch). Convention: name starts with use.
Question 5
5
Which API pair shares values from an ancestor to descendants without props drilling?
Aemit / listenBprovide / injectCbroadcast / receiveDsend / pull
provide('key', value) in an ancestor; inject('key') anywhere in its subtree. Use an InjectionKey<T> symbol for type safety.
Question 6
6
shallowRef only triggers reactivity when the ref itself is reassigned, not on deep mutations.
TTrueFFalse
shallowRef skips deep reactivity — fast for large data structures you swap whole rather than mutating in place.
Question 7
7
To destructure a reactive object while keeping reactivity on the destructured props, use ___.
toRefs(reactiveObj) converts each property into a ref so destructured names stay reactive.
Question 8
8
Which of these are valid Vue 3 lifecycle hooks in <script setup>?
Select all that apply.
AonMountedBonUpdatedConUnmountedDonBeforeUnmountEcomponentDidMount
Vue's hooks all start with on…. componentDidMount is React.