Vue Expert — Series 3

Preview — 3 of 10 questions

What does registering a warnHandler change about Vue's development-mode warnings?

javascript

app.config.warnHandler = (msg, instance, trace) => {
  sendToLoggingService({ msg, componentTrace: trace })
}

AIt intercepts every internal Vue warning (missing required prop, invalid v-model usage, duplicate keys, etc.) before it hits the console, letting you redirect it to your own logging pipeline instead of — or in addition to — console.warn

BIt suppresses all warnings entirely — nothing is logged to the console anymore

CIt only affects custom warnings triggered manually via console.warn in application code, not Vue's own internal ones

DwarnHandler only works in production builds; in development, warnings always go to the console regardless

Why does this component's data refresh only on the first mount, but not on subsequent tab switches?

javascript

<script setup>
import { onMounted, ref } from 'vue'
const data = ref(null)
onMounted(async () => {
  data.value = await fetchLatest()
})
</script>

AonMounted runs on every activation automatically — this scenario is impossible as described

BKeepAlive prevents onMounted from ever running more than once, globally, even outside cached components

COnce a component is cached by <KeepAlive>, switching away and back doesn't unmount/remount it — onMounted only fires on the true first mount. To re-run logic on every reactivation, the component needs the activated hook instead, which fires each time a cached instance is toggled back into view (with a matching deactivated hook firing when it's toggled away)

DThe fix is to add a :key that changes on every tab switch, forcing onMounted to re-fire

How does Vue's compiler represent this multi-root template internally, given the render function has to return a single value?

javascript

<template>
  <h1>Title</h1>
  <p>Body text</p>
</template>

AIt's a compile error — a render function must return exactly one root VNode, so multi-root templates are impossible without a build-time transform that adds an implicit wrapper <div>

BThe compiler wraps the two elements in a special internal Fragment VNode — a VNode type that has no corresponding real DOM element itself, but holds an array of child VNodes, letting the render function return one value (the Fragment) that ultimately produces multiple sibling DOM nodes

COnly the first root element (<h1>) is actually rendered; the second is discarded silently

DVue renders each root as a separate, independent component instance under the hood

Answer all 10 questions (7 more), see explanations for every answer, and track your score.