Vue Composition API: Basics and Best Practices Quiz Quiz

Assess your understanding of the Vue Composition API, its core features, and recommended patterns for code organization. This quiz covers essential concepts and best practices for using the Composition API in modern web development.

1. Basic Usage of setup Function

   Which of the following is the main purpose of the setup function in the Composition API?

   1. Define lifecycle hooks directly
   2. Initialize component logic and return reactive values
   3. Set up routing for the application
   4. Register component events globally

   Explanation: The setup function is responsible for initializing component logic and returning reactive values, making them accessible in the template. Defining lifecycle hooks directly is not its purpose; hooks must be called within setup. Registering component events globally or configuring routing are outside the intended responsibilities of setup. Only the first option correctly describes the primary role of the setup function.

2. Reactivity with ref and reactive

   If you need to create a reactive reference to a primitive value such as a number in the Composition API, which function should you use?

   1. watch
   2. computed
   3. reactive
   4. ref

   Explanation: The ref function is specifically designed for creating reactive references to primitive values, making it ideal for numbers, strings, and booleans. The reactive function is primarily for creating reactive objects and arrays, not standalone primitives. computed creates derived reactive values, and watch is used to observe changes but not to create reactive references. Only ref is suitable in this scenario.

3. Best Practice: Code Organization

   What is a recommended best practice for organizing reusable logic when using the Composition API?

   1. Extract logic into separate composable functions
   2. Rely solely on options-based mixins
   3. Place all logic inside the setup function
   4. Store logic in the template section

   Explanation: Extracting logic into separate composable functions promotes reusability and cleaner code when using the Composition API. Placing all logic inside the setup function quickly leads to cluttered and hard-to-maintain code. Storing logic in the template section is incorrect, as templates are for markup only. Relying solely on mixins is discouraged, as they can cause name conflicts and hurt readability compared to composables.

4. Computed Properties

   In the Composition API, what is the primary use of the computed function?

   1. Directly mutate reactive objects
   2. Watch for changes and trigger side effects
   3. Register template-only local variables
   4. Create reactive derived values based on other reactive data

   Explanation: The computed function is used to create reactive derived values that automatically update when their dependencies change. Watching for changes and triggering side effects is handled by the watch function. Mutating reactive objects is done directly or via ref/ reactive, not computed. Registering template-only variables is not a feature of computed, making only the first option correct.

5. Props and the Composition API

   When using the Composition API, how are props accessed inside the setup function of a component?

   1. By registering props on the template directly
   2. By defining props as reactive within setup
   3. By importing props from an external module
   4. By using the first argument of the setup function

   Explanation: Props are provided as the first argument to the setup function, allowing direct and reactive access to prop values. Importing props from an external module is incorrect and not supported. Template registration does not provide access within setup, and defining props as reactive inside setup is unnecessary since they are already reactive as arguments. The correct way is through the function's first argument.