Title: Vue Cards — LearnCoachAssist

Q: What is shallowReactive in Vue?
A: It creates a reactive object where only the top-level properties are tracked; nested objects stay non-reactive unless wrapped separately.

Q: What is triggerRef() used for?
A: It manually notifies Vue that a shallowRef changed after you mutated its inner value without replacing the reference.

Q: What does getCurrentInstance() return?
A: It returns the current active component instance and is mainly useful in advanced framework or library code.

Q: What is Vue.compile()?
A: It is a runtime+compiler API that turns a template string into a render function at runtime.

Q: What does mode="out-in" do on <Transition>?
A: It waits for the leaving element to finish its transition before inserting the entering element.

Q: What are the six core Vue transition classes?
A: v-enter-from, v-enter-active, v-enter-to, v-leave-from, v-leave-active, and v-leave-to.

Q: What is the difference between v-show and v-if?
A: v-show toggles CSS display while keeping the element in the DOM; v-if adds or removes the element entirely.

Q: How do you destructure slot props in Vue?
A: Use v-slot="{ item, index }" or the shorthand #default="{ item, index }" on the parent side.

Q: What is router.beforeResolve?
A: A global guard that runs after in-component and async route guards resolve but before navigation is confirmed.

Q: What is router.afterEach used for?
A: It runs after successful navigation and is useful for analytics, logging, and cleanup.

Q: What are onRenderTracked and onRenderTriggered?
A: Debug hooks that tell you which reactive dependency was tracked or which one caused a re-render.

Q: Why use defineComponent()?
A: It improves TypeScript inference for props, emits, computed values, and component options.

Q: What is PropType in Vue?
A: A helper type that lets you define complex prop types like arrays of objects or discriminated unions in the Options API.

Q: How do you validate emitted events?
A: Use the emits option with validation functions keyed by event name.

Q: How can a child support v-model.capitalize?
A: Read the generated modelModifiers prop and adjust behavior based on the modifier flags.

Q: What events can <Suspense> emit?
A: It can emit fallback and resolve-related lifecycle events, which help coordinate async loading states.

Q: How do you register a component globally?
A: Call app.component('MyName', MyComponent) during app setup.

Q: How do you register a custom directive globally?
A: Call app.directive('focus', { mounted(el) { el.focus(); } }).

Q: What is static site generation (SSG) in Vue?
A: It pre-renders pages to HTML at build time for faster first load and better crawlability.

Q: What does the .prop modifier on v-bind do?
A: It forces Vue to set a DOM property instead of an HTML attribute.

Q: What is a composable in Vue 3?
A: A composable is a reusable function that packages reactive state and logic for use across components.

Q: Why is the Composition API useful?
A: It lets related logic live together, improves reusability, and scales more cleanly in large components.

Q: What is ref() best for?
A: It stores reactive primitive values or single object references accessed through .value.

Q: What is reactive() best for?
A: It wraps objects so their properties are tracked reactively without using .value.

Q: What is the downside of destructuring a reactive object directly?
A: You can lose reactivity unless you convert properties with helpers like toRefs().

Q: What does toRefs() do?
A: It converts each property on a reactive object into a linked ref so destructuring stays reactive.

Q: What is a computed property?
A: A cached reactive value derived from other reactive sources that recomputes only when dependencies change.

Q: When should you use watch() instead of computed()?
A: Use watch() for side effects like API calls, persistence, or logging rather than value derivation.

Q: What is watchEffect()?
A: A reactive effect that runs immediately and automatically tracks any dependencies used during execution.

Q: What does nextTick() do?
A: It waits for Vue to finish applying pending DOM updates before running follow-up code.

Q: What problem do keys solve in v-for?
A: Keys help Vue preserve element identity correctly during updates, moves, and list diffing.

Q: Why should keys be stable and unique?
A: Unstable keys can cause DOM reuse bugs, broken form state, and flickering transitions.

Q: What is defineProps() in <script setup>?
A: A compiler macro that declares component props with clean syntax inside single-file components.

Q: What is defineEmits()?
A: A compiler macro that declares and types the events a component can emit.

Q: What is defineExpose()?
A: It explicitly exposes selected methods or refs from a <script setup> component to a parent using template refs.

Q: What is provide/inject useful for?
A: It shares values deeply through the component tree without prop drilling.

Q: What is the tradeoff of provide/inject?
A: It reduces prop noise but can make data flow less explicit if overused.

Q: What is a render function in Vue?
A: A JavaScript function that returns VNodes directly instead of using a template.

Q: When are render functions helpful?
A: They are useful for highly dynamic output, headless UI libraries, and advanced composition patterns.

Q: What does Teleport solve?
A: It renders a component's DOM somewhere else in the document, which is ideal for modals, toasts, and overlays.

Q: Why is KeepAlive useful?
A: It caches inactive dynamic components so their state is preserved when the user returns.

Q: What does a navigation guard protect?
A: It can block, redirect, or prepare route changes based on auth, unsaved data, permissions, or preload needs.

Q: What is lazy loading a route?
A: It loads route components only when needed, shrinking the initial bundle size.

Q: How do route params differ from query params?
A: Route params are part of the URL path and usually identify a resource, while query params modify filtering, sorting, or optional state.

Q: What is hydration in Vue SSR?
A: Hydration attaches Vue's reactivity and event listeners to server-rendered HTML on the client.

Q: What causes hydration mismatch errors?
A: Differences between server and client output, often from random values, time-based content, or browser-only state.

Q: What is a Pinia store?
A: A Pinia store is a centralized reactive module for app-level state, actions, and derived values.

Q: Why is Pinia preferred over ad hoc global state?
A: It gives structure, tooling, traceability, and cleaner testing for shared state.

Q: How do you test a Vue component well?
A: Assert the rendered behavior and emitted effects from the user's perspective rather than implementation details.

Q: What is a good performance habit in Vue lists?
A: Avoid unnecessary reactive work, use stable keys, memoize expensive derivations, and virtualize very large lists.