Data, HTTP & Patterns — Chapter Quiz

Question 1

1

In a script-setup component, where would you typically run a one-time fetch?

ATop-level (synchronous) scriptBInside onMountedCIn a computedDIn a watch callback only

onMounted runs once after the DOM is ready — the standard place for first-load fetches.

Question 2

2

What does <Suspense> do?

ACaches network requestsBShows a fallback while a child component awaits async setupCDisables reactivityDThrottles event handlers

Wrap an async component in <Suspense> and provide a #fallback slot to show until its setup promise resolves.

Question 3

3

What problem does <Teleport to="body"> solve for modals?

AIt speeds up renderingBIt renders the modal at the end of body, escaping ancestor overflow/z-index issuesCIt makes the modal accessible automaticallyDIt enables SSR

Teleport keeps the component in the tree but moves its rendered DOM elsewhere — perfect for modals that need to escape clipped ancestors.

Question 4

4

<KeepAlive> is used to:

ACache HTTP responsesBKeep dynamic components mounted (in memory) when not displayedCPrevent the user from leaving the pageDPersist data to localStorage

Wrap <component :is> or <router-view> in <KeepAlive> to preserve state (inputs, scroll) across switches.

Question 5

5

Which CSS class does <Transition name="fade"> apply at the start of an enter?

Afade-activeBfade-enter-fromCfade-leave-toDenter-fade

Enter sequence: *-enter-from → *-enter-active → *-enter-to. Leave mirrors with *-leave-….

Question 6

6

You can declare typed props using the generic form defineProps<{ name: string }>().

TTrueFFalse

The TS-generic form needs no runtime args and gives full type inference.

Question 7

7

The official Vue translation library is called ___.

vue-i18n covers translations, plurals, and number/date formatting.

Question 8

8

Which of these are valid Vue 3 built-in components?

Select all that apply.

<Provider> is React (Context). Vue uses provide() in script — not a component.

Test what you learned.