Vue.js Mastery Quiz: From Reactivity to Composition API — Test Your Skills! (31)

A A. A full-stack JavaScript framework with a built-in backend server B B. A progressive JavaScript framework for building UIs — approachable like React but with a more opinionated structure including built-in directives, two-way binding, and a gentle learning curve C C. A CSS animation framework built on top of JavaScript D D. A compiled language that transpiles to JavaScript like TypeScript

A A. Options API is for Vue 3 only; Composition API is for Vue 2 only B B. Options API organizes code by option type (data, methods, computed, watch); Composition API organizes by logical concern using setup() — making code more reusable and easier to extract into composables C C. Composition API removes reactivity; Options API keeps it D D. They are identical in functionality — just different naming conventions

A A. A special script tag that only runs during the build process B B. Syntactic sugar for the Composition API that runs at component setup time — everything declared inside is automatically available in the template without explicit return statements C C. A way to write server-side logic inside a Vue component D D. A legacy Options API syntax that was renamed in Vue 3

A A. A way to get a reference to a DOM element, like React useRef B B. A function that wraps a primitive value in a reactive container — the value is accessed and mutated via .value, and changes automatically trigger UI updates C C. A shorthand for reactive() that only works with objects D D. A reference to an external component instance for method calling

A A. ref() is for Vue 2; reactive() is for Vue 3 only B B. ref() wraps any value (primitives or objects) in a .value container; reactive() makes a plain object deeply reactive and is accessed directly without .value C C. reactive() only works with arrays; ref() works with all other types D D. They are identical — reactive() is just an alias for ref()

A A. computed() runs on every render; methods only run when called explicitly B B. computed() returns a cached reactive value that only re-evaluates when its reactive dependencies change; a method re-executes every time it is called with no caching C C. computed() is asynchronous; methods are synchronous only D D. computed() replaces the need for watchers entirely

A A. watch() creates a computed property that watches multiple sources simultaneously B B. watch() runs a callback with side effects when a reactive source changes — use it when you need to perform async operations, call APIs, or cause side effects in response to state changes C C. watch() is the Vue 3 equivalent of computed() from Vue 2 D D. watch() prevents reactive values from triggering re-renders

A A. watchEffect() requires you to explicitly specify dependencies; watch() detects them automatically B B. watchEffect() automatically tracks all reactive dependencies accessed inside its callback and re-runs whenever any of them change — no need to specify a source explicitly C C. watchEffect() only works with reactive() objects; watch() works with ref() values D D. They are identical — watchEffect() is just shorthand for watch() with no options

A A. A directive for applying CSS models to elements B B. A two-way data binding directive that is shorthand for binding a value prop and listening to an input/update event simultaneously C C. A one-way data binding directive from child to parent only D D. A Vue 2-only directive replaced by v-bind in Vue 3

A A. v-show removes the element from the DOM; v-if hides it with CSS B B. v-if conditionally renders the element (adds/removes from DOM); v-show always keeps the element in the DOM but toggles its CSS display property C C. v-show works with components; v-if only works with HTML elements D D. They are identical — v-show is just an alias for v-if

A A. Used for keyboard shortcut binding on list elements B B. A unique identifier that helps Vue's virtual DOM diffing algorithm efficiently track, reorder, and update list items without destroying and recreating unrelated elements C C. A required CSS class identifier for list styling D D. A prop that gets passed automatically to each list item component

A A. Using the $parent property inside the child component B B. Using props — defined with defineProps() in the child and passed using v-bind or colon syntax in the parent template C C. Using the provide/inject API for all parent-child communication D D. Writing directly to the child's reactive() state from the parent

A A. By directly modifying the parent's reactive state using $parent B B. By emitting custom events using defineEmits() and $emit() — the parent listens with v-on or @ syntax C C. By using the Vuex store to share data between parent and child D D. By returning values from lifecycle hooks that the parent can access

A A. Providing CSS styles to deeply nested child components B B. Dependency injection pattern — an ancestor provides a value and any descendant (no matter how deep) can inject and use it, avoiding prop drilling C C. Providing server-side data to client components during SSR D D. An alternative to props for passing data between sibling components

A A. Composables are Vue 3 class mixins — a carry-over from Vue 2 mixins B B. Reusable functions that use the Composition API (ref, computed, watch, lifecycle hooks) to encapsulate and share stateful logic across components — directly analogous to React custom hooks C C. Built-in Vue utility functions for composing CSS animations D D. A Vue CLI feature for composing multiple components into one file

A A. Vue 3 removed lifecycle hooks in favor of watchers B B. Lifecycle hooks run at specific stages: onMounted (after DOM mount), onUpdated (after re-render), onUnmounted (before destroy) — called inside setup() in the Composition API C C. Lifecycle hooks only exist in the Options API and cannot be used in script setup D D. Vue 3 lifecycle hooks are identical to Vue 2 with no changes

A A. A built-in Vue directive for navigating between pages B B. The official client-side routing library for Vue — routes are defined as an array of objects mapping path strings to component imports, supporting dynamic segments, nested routes, and navigation guards C C. A server-side routing solution for Vue SSR applications D D. A Vue plugin that automatically generates routes from the file system

A A. CSS classes applied to active route links automatically B B. Functions that run before, during, or after route navigation — used to protect routes (auth checks), redirect users, or cancel navigation C C. A Vue directive that prevents clicking on disabled navigation links D D. Built-in animations between route transitions

A A. A UI component library that replaced Vuex for styling state B B. Vue's official state management library — lighter and simpler than Vuex with no mutations, full TypeScript support, DevTools integration, and a more intuitive API inspired by the Composition API C C. A server-side state management solution for Vue SSR apps D D. A Vue plugin that automatically syncs state with localStorage

A A. A TypeScript file that exports a single Vue component class B B. A .vue file that encapsulates a component's template, script, and styles in one file — keeping related code together with proper separation of concerns C C. A Vue component that can only render one root element D D. A component architecture pattern where one parent file contains all child components

A A. Compresses and minifies the CSS for production builds B B. Scopes the CSS rules to the current component only by adding a unique data attribute selector — styles do not leak to child or parent components C C. Enables CSS modules with locally scoped class names as JavaScript objects D D. Restricts styles to only apply to the component's root element

A A. Time slots for scheduling component re-renders B B. A content distribution mechanism that lets parent components inject HTML content into specific placeholders inside a child component, enabling highly reusable and flexible component APIs C C. A Vue Router feature for rendering route components in designated areas D D. JavaScript time slots that control when watchers execute

A A. A way to expose component props to parent components automatically B B. Explicitly exposes component properties and methods to parent components that access the child via a template ref — by default, script setup components are completely closed C C. A macro for exposing reactive data to the Vue DevTools D D. A function that exports the component for use in other files

A A. Teleporting data between Pinia stores instantly B B. Rendering a component's template in a different DOM location (outside the component's parent hierarchy) while keeping it logically part of the component — perfect for modals, toasts, and tooltips C C. A Vue Router feature for instant page transitions D D. A performance optimization that moves heavy components to a Web Worker

A A. A component that suspends all Vue reactivity for performance profiling B B. A built-in component that displays a fallback while async child components (or components with async setup()) are resolving — similar to React Suspense C C. A Vue Router component for lazy-loading routes with loading states D D. A Pinia plugin that suspends state updates during batch operations

A A. CSS transition utilities that replace all manual animation code B B. Built-in components that apply enter/leave CSS transitions or JavaScript animations when elements are added, removed, or changed — TransitionGroup handles lists with move animations C C. Components for handling route transition animations in Vue Router D D. Vue equivalents of CSS @keyframes for component-level animations

A A. v-bind handles events; v-on handles attribute binding — no shorthand exists B B. v-bind dynamically binds HTML attributes or props (shorthand :); v-on attaches event listeners (shorthand @) C C. v-on is for native DOM events only; v-bind is for component props only D D. They are interchangeable — v-bind and v-on perform the same operation

A A. Vue 3 uses a virtual DOM diffing algorithm; Vue 2 uses direct DOM manipulation B B. Vue 3 uses ES6 Proxy for deep reactivity tracking with no limitations on dynamic property additions; Vue 2 used Object.defineProperty which required Vue.set() to add new reactive properties C C. Vue 3 uses Web Workers for reactivity; Vue 2 used the main thread only D D. They use identical reactivity systems — only the API changed between versions

A A. Deprecated functions from Vue 2 that should not be used in Vue 3 B B. Performance optimizations — shallowRef() only tracks .value reassignment (not deep inner changes); shallowReactive() only tracks top-level property changes — useful for large objects where deep reactivity is expensive C C. Functions that create read-only reactive references that cannot be mutated D D. Utility functions for creating reactive primitives that auto-convert to strings

A A. A directive for adding memo-style sticky notes to template elements during development B B. A performance optimization directive that memoizes a sub-tree of the template and skips re-rendering it unless the specified dependency array values change — like React.memo for template blocks C C. A directive that caches API responses inside the template D D. A Vue DevTools directive for marking components to inspect in memory

A A. A CSS framework built specifically for Vue.js applications B B. A full-stack meta-framework built on top of Vue — adds file-based routing, SSR, SSG, API routes, auto-imports, and a module ecosystem, similar to how Next.js relates to React C C. A state management alternative to Pinia for large Vue applications D D. A Vue testing framework with built-in component mocking