---
title: "Vue.js Fundamentals: Reactive Components & Templates"
description: "Master Vue.js basics: reactive data, templates, components, directives (v-if, v-for), event handling, and computed properties. Build interactive UIs with Vue."
author: "Mohammad Abu Mattar"
canonical: https://mkabumattar.com/quizzes/post/vuejs-fundamentals-quiz
---

# Vue.js Fundamentals: Reactive Components & Templates

Welcome to the Vue.js Basics Quiz! Vue.js is a progressive JavaScript framework for building user interfaces. Whether you're creating a simple interactive widget or a complex single-page application, understanding Vue's core concepts like reactive data, components, and directives is essential. This quiz will test your knowledge of Vue's fundamentals and help you solidify your understanding of how to build dynamic web applications with Vue. Good luck!

## Questions

### 1. What is Vue.js?

- **A progressive JavaScript framework used for building interactive user interfaces** ✅
  - Vue: reactive, component-based. Simpler than React, more flexible than Angular. Growing ecosystem.
- A static site generator focused exclusively on server-side rendering performance
  - Vue powers interactive applications, though it can be used for SSR with tools like Nuxt.
- A lightweight template engine designed to replace HTML in backend applications
  - Vue is a full client-side framework, not just a backend template engine.
- A specialized database management system for handling real-time JSON data
  - Vue is a frontend UI framework, not a database or backend storage solution.

**Hint:** Think about a JavaScript framework for building user interfaces.

### 2. What is reactive data in Vue?

- **A system where the UI automatically re-renders whenever the underlying data changes** ✅
  - Change data → UI updates automatically. Core Vue feature. data() returns reactive object.
- A specific data type in JavaScript used to store large arrays and complex objects
  - Reactivity is a system of tracking changes, not a specific native JavaScript data type.
- A global state management pattern that requires manual UI updates after every change
  - Vue reactivity is automatic; manual updates are generally not required.
- A security feature that prevents external scripts from modifying the internal state
  - Reactivity is an optimization and syncing feature, not a security protocol.

**Hint:** Think about data automatically updating the UI.

### 3. What is a Vue component?

- **A reusable Vue instance containing its own encapsulated template, logic, and styles** ✅
  - Single File Component: .vue file with <template>, <script>, <style>. Encapsulated, reusable.
- A standard HTML5 element that provides built-in browser interactivity by default
  - Components use HTML elements but are custom abstractions defined by the developer.
- A global CSS stylesheet that applies consistent branding across the entire application
  - While components include styles, they are primarily focused on structure and logic.
- A native JavaScript function used to calculate the dimensions of the browser window
  - Components are UI building blocks, not utility functions for window measurements.

**Hint:** Think about reusable UI parts.

### 4. What is the Vue template syntax?

- **HTML-based syntax using {{ }} for interpolation and v-directives for reactive logic** ✅
  - {{ message }} displays data. v-if, v-for, v-bind, v-on. Declarative.
- A pure JavaScript syntax called JSX that requires a specialized compiler to render
  - Vue templates are HTML-based; while Vue supports JSX, it is not the default template syntax.
- A text-only format that does not support HTML tags or interactive event listeners
  - Vue templates are fully compatible with HTML and support complex event handling.
- A logic-less system that requires all data transformations to happen in the script block
  - Vue templates allow for basic expressions and logic using built-in directives.

**Hint:** Think about {{ }} interpolation in HTML.

### 5. What is v-if directive in Vue?

- **A directive used for conditional rendering that removes the element from the DOM** ✅
  - <div v-if="isVisible">Visible</div>. v-else, v-else-if available.
- A CSS-based directive that toggles the "display: none" property on an element
  - That describes v-show; v-if physically adds or removes the element from the DOM.
- An event listener that triggers a function when a user hovers over an HTML element
  - v-if is for conditional structure, not for handling user mouse interactions.
- A looping mechanism used to render an array of items into a list of components
  - That describes v-for; v-if is strictly for boolean conditional logic.

**Hint:** Think about conditional rendering.

### 6. What is v-for directive in Vue?

- **A directive used to loop over data and render a list of items within the template** ✅
  - v-for="(item, index) in items". Rendered per item. Use :key for tracking.
- A native JavaScript loop used to manipulate data inside the component’s script section
  - v-for is a template directive for rendering UI, not a procedural script loop.
- A method for validating form inputs before they are submitted to the backend server
  - v-for is for list rendering, not for input validation or form handling.
- A specialized directive that only works for iterating through numeric ranges
  - v-for works with arrays, objects, and numeric ranges as well.

**Hint:** Think about rendering lists.

### 7. What is v-bind in Vue?

- **A directive used to dynamically bind data to HTML attributes like src, href, or class** ✅
  - v-bind:attribute or :attribute shorthand. Dynamically set src, href, class, etc.
- An event listener shorthand used to capture user inputs such as clicks and keystrokes
  - That describes v-on (@); v-bind is for attribute synchronization.
- A template tag used to inject raw HTML code directly into a component container
  - v-bind is for attributes; injecting raw HTML is handled by the v-html directive.
- A mechanism for passing methods from a child component back up to its parent
  - v-bind passes data down (props); child-to-parent communication uses emits.

**Hint:** Think about binding data to HTML attributes.

### 8. What is v-on in Vue?

- **A directive used to attach event listeners that trigger methods on user interaction** ✅
  - v-on:event or @event shorthand. @click, @submit, @input. Call methods on events.
- A standard HTML attribute used to define the initial value of a form input field
  - v-on handles events; defining initial values is done via v-bind or v-model.
- A reactive property that automatically tracks the current time and date
  - v-on is a directive for event handling, not a built-in time tracking property.
- A backend service used to send push notifications to users even when they are offline
  - v-on is a frontend template directive, not a service for push notifications.

**Hint:** Think about event handling.

### 9. What is a computed property in Vue?

- **A reactive property derived from data that is cached until its dependencies change** ✅
  - computed: { fullName() { return this.first + this.last } }. Reactive. Cached. Preferred over methods in templates.
- A standard method that re-executes every time the component template is re-rendered
  - Methods always re-execute; computed properties are more efficient due to caching.
- A static configuration object used to define the metadata for a Vue component
  - Computed properties are dynamic and reactive, not static configuration objects.
- A tool used only for performing complex mathematical calculations and logic
  - Computed properties can be used for any derived state, such as formatting strings or filtering lists.

**Hint:** Think about derived data that caches results.

### 10. What is a watched property in Vue?

- **A function that executes custom logic in response to changes in a specific data property** ✅
  - watch: { message(newVal, oldVal) { } }. For side effects. Less preferred than computed.
- A property that automatically caches values to improve the performance of UI rendering
  - Caching is the primary feature of computed properties, not watched properties.
- A directive used to prevent the user from seeing private data in the browser console
  - Watchers are for reacting to state changes, not for implementing security or privacy.
- An alternative to computed properties that is preferred for all derived state logic
  - Computed properties are preferred for derived state; watchers are for side effects.

**Hint:** Think about responding when data changes.

### 11. What is the Vue lifecycle?

- **A series of stages including creation, mounting, updating, and unmounting** ✅
  - Hooks run at specific times. onMounted, onUpdated (Composition API). Use for initialization, cleanup.
- A tool used to restart the application whenever a syntax error is detected
  - The lifecycle refers to the stages of a single component instance, not error handling.
- A specific sequence of animations that occur when a user navigates between pages
  - While lifecycle hooks can trigger animations, the lifecycle itself is the component state flow.
- A mandatory configuration that requires every component to be updated every 5 seconds
  - The lifecycle responds to state changes and DOM events, not a fixed time interval.

**Hint:** Think about stages from creation to destruction.

### 12. What is v-model in Vue?

- **A directive that provides two-way data binding between form inputs and component state** ✅
  - <input v-model="message">. Equivalent to :value + @input. Syncs input with data.
- A one-way data flow pattern where data can only move from the parent to the child
  - v-model is specifically designed for two-way synchronization, unlike standard props.
- A validation library used to check if a user has entered a valid email address
  - v-model handles data binding; validation is usually handled by custom logic or libraries.
- A performance optimization that reduces the number of re-renders in a form
  - v-model is for developer convenience; its performance is similar to manual binding.

**Hint:** Think about two-way data binding.

### 13. What is the Composition API in Vue?

- **An alternative API that allows for organizing component logic by logical concerns** ✅
  - setup() function, reactive(), ref(). Better for reuse (composables). Modern approach.
- A legacy system that was removed in Vue 3 to simplify the framework’s core
  - The Composition API was actually introduced in Vue 3 as a modern enhancement.
- A specialized tool used only for composing complex SVG graphics inside templates
  - It is a general-purpose API for organizing any component logic, not just graphics.
- A mandatory requirement that prevents the use of the Options API in modern apps
  - Options API and Composition API can coexist in the same Vue 3 application.

**Hint:** Think about organizing code by feature instead of option.

### 14. What is ref() in Composition API?

- **A function used to create a reactive reference for primitive values and objects** ✅
  - ref().value to access/modify. Unwraps in templates. Primitive reactivity.
- A specialized method for creating static, non-reactive constants in the setup block
  - ref() is specifically used to make values reactive; constants do not require ref().
- A browser utility used to refresh the page whenever a reactive value changes
  - ref() triggers internal Vue re-renders, not a full browser page refresh.
- A legacy directive used to bind HTML attributes to the component instance
  - ref() is a modern function in the Composition API, not a template directive.

**Hint:** Think about creating reactive values.

### 15. What is reactive() in Composition API?

- **A function that creates a reactive proxy of an object for deep state tracking** ✅
  - reactive() for objects. Direct property access. ref preferred for simplicity.
- A tool used to convert standard HTML elements into reactive Vue components
  - reactive() is used for JavaScript data structures, not for HTML elements.
- An alternative to ref() that is designed exclusively for handling string values
  - reactive() is for objects; ref() is generally preferred for strings and primitives.
- A global configuration setting that enables reactivity for the entire application
  - reactive() is used to create specific reactive objects, not for global settings.

**Hint:** Think about creating reactive objects.

### 16. What are composables in Vue?

- **Reusable functions that encapsulate and share reactive logic across components** ✅
  - useCounter(), useFetch(). Functions using Composition API. Share logic across components.
- Visual UI components that are designed to be nested inside one another
  - Composables handle logic and state, while components handle the UI and markup.
- A set of built-in CSS classes that allow for easy component layout composition
  - Composables are JavaScript-based logic, not CSS styling or layout classes.
- Specialized backend functions used to connect Vue to a relational database
  - Composables are part of the frontend Composition API, not backend logic.

**Hint:** Think about reusable logic functions.

### 17. What is the virtual DOM in Vue?

- **An in-memory representation of the UI used to optimize and batch DOM updates** ✅
  - Virtual DOM: Vue compares new with old, updates only changed elements.
- A simulated browser environment used only for running automated unit tests
  - While used in testing, the Virtual DOM is a core part of the production rendering engine.
- A copy of the actual DOM that allows users to interact with hidden page elements
  - The Virtual DOM is an internal optimization tool, not a user-facing feature.
- A deprecated technology that has been replaced by direct DOM manipulation in Vue 3
  - Vue 3 continues to use a highly optimized Virtual DOM for its rendering performance.

**Hint:** Think about how Vue optimizes rendering.

### 18. What is Vue Router?

- **The official library for managing navigation and routes in a single-page application** ✅
  - Vue Router: navigate routes, lazy-load components, history management.
- A built-in directive used to animate the movement of elements across the screen
  - Navigation is handled by the Router library; movement animations use the Transition component.
- A hardware device used to speed up the delivery of Vue.js files to the client
  - Vue Router is a software library for application logic, not a physical hardware device.
- A mandatory core feature that cannot be removed from any Vue.js application
  - Vue Router is an optional official package; many small apps do not require routing.

**Hint:** Think about navigating between pages.

### 19. What are props in Vue?

- **Custom attributes used to pass data from a parent component down to a child** ✅
  - props: ["title"], props: { title: String }. One-way down. Mutation discouraged.
- Mutable state properties that allow a child to modify its parent’s internal data
  - Props are read-only; children communicate back to parents via events (emit).
- A specialized CSS property used to define the spacing between different components
  - Props are for data passing in JavaScript, not for styling or CSS layout.
- Global variables that are accessible by every component in the application
  - Props are explicitly passed between specific component hierarchies, not globally accessible.

**Hint:** Think about passing data from parent to child component.

### 20. What is emit in Vue?

- **A mechanism that allows a child component to send custom events up to its parent** ✅
  - this.$emit("eventName", data) or emits: {} in setup(). Parent listens @eventName.
- A method for broadcasting data to every single component in the application
  - Emit is used for parent-child communication, not for global broadcasting.
- A directive used to automatically download external assets from a remote server
  - Emit handles internal component events, not external file or asset downloads.
- A performance tool used to reduce the memory footprint of reactive objects
  - Emit is a communication pattern, not a performance or memory optimization tool.

**Hint:** Think about child component notifying parent.

### 21. What are slots in Vue?

- **Placeholder elements that allow parents to inject custom markup into a child component** ✅
  - <slot></slot> in component. <Component><p>Content</p></Component>. Named slots, scoped slots.
- A way of passing complex JavaScript functions from a child up to its parent
  - Slots are for passing markup and content; passing logic is usually done via events.
- Fixed positions in the component script where data properties must be defined
  - Slots are template features for layout, not structural rules for script blocks.
- A security feature that prevents unauthorized components from rendering on the page
  - Slots are for content composition and flexibility, not for security or permissions.

**Hint:** Think about component composition and content insertion.

### 22. What are template refs in Vue?

- **A way to obtain a direct reference to a DOM element or a child component instance** ✅
  - this.$refs.inputRef in Options API. ref() return value.value in Composition API.
- A specialized reactive state used exclusively for storing user-submitted form data
  - Template refs provide DOM access, while reactive state stores application data.
- A method for refreshing the template whenever an external API call is completed
  - Re-rendering is handled by the reactivity system, not by template refs.
- A type of link used to navigate between different views in a routing system
  - Navigation is handled by router links; template refs are for direct element interaction.

**Hint:** Think about accessing DOM elements directly.

### 23. What is the watch option with deep and immediate?

- **Watch configurations that enable nested property tracking and initial execution** ✅
  - watch: { user: { handler(newVal) {}, deep: true, immediate: true } }.
- A security setting that prevents watchers from accessing sensitive browser APIs
  - Deep and immediate are for execution timing and nesting, not security.
- The default behavior for all watchers defined in a Vue 3 composition function
  - Deep and immediate are optional settings and are false by default for performance.
- A performance optimization that stops watchers from running on mobile devices
  - Watchers run on all devices regardless of these configuration settings.

**Hint:** Think about watching nested objects and immediate execution.

### 24. What is a dynamic component in Vue?

- **A component rendered using the <component> element with a reactive :is binding** ✅
  - <component :is="tabComponent">. Switch components without mounting/unmounting.
- An element that automatically changes its CSS styles based on the current window size
  - This describes responsive design, not the Vue dynamic component feature.
- A component that is generated at runtime using a remote string of HTML code
  - Dynamic components switch between pre-defined components, they don’t generate HTML.
- A specialized component that can only be used inside of an asynchronous function
  - Dynamic components can be used anywhere in the template, not just in async contexts.

**Hint:** Think about switching between components based on state.

### 25. What is the Transition component in Vue?

- **A built-in wrapper component used to apply entry and exit animations to elements** ✅
  - CSS classes: v-enter-active, v-leave-active. JavaScript hooks available.
- A third-party library that replaces standard CSS animations with JavaScript
  - Transition is a built-in Vue component that enhances standard CSS and JS.
- A navigation tool used to manage the transition between different URL routes
  - Route transitions are handled by Vue Router in combination with the Transition component.
- A layout system used to move elements from one part of the page to another
  - Moving elements between different DOM locations is handled by Teleport, not Transition.

**Hint:** Think about CSS/JS animations for elements appearing/disappearing.

### 26. What are async components in Vue?

- **Components that are lazily loaded from the server only when they are needed** ✅
  - defineAsyncComponent(() => import("./AsyncComp.vue")). Better for performance.
- Components that contain asynchronous methods like API calls in their setup
  - While components can have async methods, "async components" refers to lazy loading.
- A way to prevent components from rendering until the user is logged into the site
  - This is usually handled by route guards or v-if, not by async component definitions.
- A mandatory performance feature that makes every component load in parallel
  - Async components are used strategically for code-splitting, they are not mandatory.

**Hint:** Think about loading components on demand.

### 27. What is Provide/Inject in Vue?

- **A dependency injection system for sharing data with deeply nested child components** ✅
  - provide("key", value) in parent, inject("key") in deeply nested child. Avoids prop drilling.
- A method for passing data between two components that do not share an ancestor
  - Provide/Inject requires a parent-child relationship in the component tree.
- A way to inject external JavaScript libraries into a Vue component’s template
  - It is for sharing internal Vue state and data, not for loading external libraries.
- A performance tool used to inject HTML directly into the browser’s shadow DOM
  - Provide/Inject is for state management, not for DOM manipulation or shadow DOM.

**Hint:** Think about sharing data across component hierarchy without prop drilling.

### 28. What are scoped slots in Vue?

- **Slots that allow a child component to pass data back up to the parent’s template** ✅
  - Child passes data via <slot :item="item">. Parent accesses via #default="slotProps".
- A way to limit the visibility of a slot so it can only be seen by specific users
  - Scoped slots refer to data scope, not user permissions or visibility logic.
- A technique for applying scoped CSS styles to the content inside of a slot
  - Scoped styles are for CSS; scoped slots are for passing reactive JavaScript data.
- A deprecated feature from Vue 2 that was replaced by Provide/Inject in Vue 3
  - Scoped slots are still a powerful and widely used pattern in Vue 3 development.

**Hint:** Think about slots that receive data from child component.

### 29. What is errorCaptured lifecycle hook?

- **A lifecycle hook used to capture and handle errors from descendant components** ✅
  - errorCaptured(err, instance, info) {}. Return false stops propagation. Error boundary pattern.
- A global error handler that catches every single error produced by the browser
  - errorCaptured only catches errors within the specific component’s child tree.
- A tool used to prevent the application from crashing when a syntax error occurs
  - Lifecycle hooks cannot catch syntax errors; they catch runtime component errors.
- A method for capturing the screen when an error occurs to send to the developer
  - This is an error reporting feature, whereas errorCaptured is for runtime logic handling.

**Hint:** Think about catching errors in child components.

### 30. What is Pinia in Vue?

- **The modern, lightweight state management library designed to replace Vuex** ✅
  - Pinia: defineStore() with state, getters, actions. Simpler, better TypeScript.
- A component library that provides pre-styled buttons and form inputs for Vue
  - Pinia is for state management, not a UI component or CSS framework library.
- A backend server that automatically synchronizes Vue state across different users
  - Pinia is a client-side library, not a backend or real-time sync server.
- A mandatory part of the Vue 3 core that cannot be used in Vue 2 applications
  - Pinia is an optional package and actually has support for Vue 2 as well.

**Hint:** Think about state management simpler than Vuex.