--- 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 - A static site generator focused exclusively on server-side rendering performance - A lightweight template engine designed to replace HTML in backend applications - A specialized database management system for handling real-time JSON data **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 - A specific data type in JavaScript used to store large arrays and complex objects - A global state management pattern that requires manual UI updates after every change - A security feature that prevents external scripts from modifying the internal state **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 - A standard HTML5 element that provides built-in browser interactivity by default - A global CSS stylesheet that applies consistent branding across the entire application - A native JavaScript function used to calculate the dimensions of the browser window **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 - A pure JavaScript syntax called JSX that requires a specialized compiler to render - A text-only format that does not support HTML tags or interactive event listeners - A logic-less system that requires all data transformations to happen in the script block **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 - A CSS-based directive that toggles the "display: none" property on an element - An event listener that triggers a function when a user hovers over an HTML element - A looping mechanism used to render an array of items into a list of components **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 - A native JavaScript loop used to manipulate data inside the script section of the component - A method for validating form inputs before they are submitted to the backend server - A specialized directive that only works for iterating through numeric ranges **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 - An event listener shorthand used to capture user inputs such as clicks and keystrokes - A template tag used to inject raw HTML code directly into a component container - A mechanism for passing methods from a child component back up to its parent **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 - A standard HTML attribute used to define the initial value of a form input field - A reactive property that automatically tracks the current time and date - A backend service used to send push notifications to users even when they are offline **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 - A standard method that re-executes every time the component template is re-rendered - A static configuration object used to define the metadata for a Vue component - A tool used only for performing complex mathematical calculations and logic **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 - A property that automatically caches values to improve the performance of UI rendering - A directive used to prevent the user from seeing private data in the browser console - An alternative to computed properties that is preferred for all derived state logic **Hint:** Think about responding when data changes. ### 11. What is the Vue lifecycle? - A series of stages including creation, mounting, updating, and unmounting - A tool used to restart the application whenever a syntax error is detected - A specific sequence of animations that occur when a user navigates between pages - A mandatory configuration that requires every component to be updated every 5 seconds **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 - A one-way data flow pattern where data can only move from the parent to the child - A validation library used to check if a user has entered a valid email address - A performance optimization that reduces the number of re-renders in a form **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 - A legacy system that was removed in Vue 3 to simplify the core of the framework - A specialized tool used only for composing complex SVG graphics inside templates - A mandatory requirement that prevents the use of the Options API in modern apps **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 - A specialized method for creating static, non-reactive constants in the setup block - A browser utility used to refresh the page whenever a reactive value changes - A legacy directive used to bind HTML attributes to the component instance **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 - A tool used to convert standard HTML elements into reactive Vue components - An alternative to ref() that is designed exclusively for handling string values - A global configuration setting that enables reactivity for the entire application **Hint:** Think about creating reactive objects. ### 16. What are composables in Vue? - Reusable functions that encapsulate and share reactive logic across components - Visual UI components that are designed to be nested inside one another - A set of built-in CSS classes that allow for easy component layout composition - Specialized backend functions used to connect Vue to a relational database **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 - A simulated browser environment used only for running automated unit tests - A copy of the actual DOM that allows users to interact with hidden page elements - A deprecated technology that has been replaced by direct DOM manipulation in Vue 3 **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 - A built-in directive used to animate the movement of elements across the screen - A hardware device used to speed up the delivery of Vue.js files to the client - A mandatory core feature that cannot be removed from any Vue.js application **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 - Mutable state properties that allow a child to modify the internal data of its parent - A specialized CSS property used to define the spacing between different components - Global variables that are accessible by every component in the application **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 - A method for broadcasting data to every single component in the application - A directive used to automatically download external assets from a remote server - A performance tool used to reduce the memory footprint of reactive objects **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 - A way of passing complex JavaScript functions from a child up to its parent - Fixed positions in the component script where data properties must be defined - A security feature that prevents unauthorized components from rendering on the page **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 - A specialized reactive state used exclusively for storing user-submitted form data - A method for refreshing the template whenever an external API call is completed - A type of link used to navigate between different views in a routing system **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 - A security setting that prevents watchers from accessing sensitive browser APIs - The default behavior for all watchers defined in a Vue 3 composition function - A performance optimization that stops watchers from running on mobile devices **Hint:** Think about watching nested objects and immediate execution. ### 24. What is a dynamic component in Vue? - A component rendered using the element with a reactive :is binding - An element that automatically changes its CSS styles based on the current window size - A component that is generated at runtime using a remote string of HTML code - A specialized component that can only be used inside of an asynchronous function **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 - A third-party library that replaces standard CSS animations with JavaScript - A navigation tool used to manage the transition between different URL routes - A layout system used to move elements from one part of the page to another **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 - Components that contain asynchronous methods like API calls in their setup - A way to prevent components from rendering until the user is logged into the site - A mandatory performance feature that makes every component load in parallel **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 - A method for passing data between two components that do not share an ancestor - A way to inject external JavaScript libraries into the template of a Vue component - A performance tool used to inject HTML directly into the browser 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 template of the parent - A way to limit the visibility of a slot so it can only be seen by specific users - A technique for applying scoped CSS styles to the content inside of a slot - A deprecated feature from Vue 2 that was replaced by Provide/Inject in Vue 3 **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 - A global error handler that catches every single error produced by the browser - A tool used to prevent the application from crashing when a syntax error occurs - A method for capturing the screen when an error occurs to send to the developer **Hint:** Think about catching errors in child components. ### 30. What is Pinia in Vue? - The modern, lightweight state management library designed to replace Vuex - A component library that provides pre-styled buttons and form inputs for Vue - A backend server that automatically synchronizes Vue state across different users - A mandatory part of the Vue 3 core that cannot be used in Vue 2 applications **Hint:** Think about state management simpler than Vuex.