Intermediate Vue.js test (Intermediate)

Sample questions

5 sample questions from the Intermediate Vue.js test, with the answers. Samples are taken out of the live test, so you will not meet these when you sit it.

1. Which of the following best describes the difference between ref() and reactive() in Vue 3?

   1. Using ref() allows for reactivity on primitive values and objects, whereas reactive() only works with objects and can lose reactivity if destructured.
   2. ref() is used for arrays, while reactive() is used for objects and primitives.
   3. ref() is used exclusively for component state, while reactive() is used for global state.
   4. ref() and reactive() are identical in functionality and can be used interchangeably in all scenarios.

   Answer: A. Using ref() allows for reactivity on primitive values and objects, whereas reactive() only works with objects and can lose reactivity if destructured.

   ref() is suitable for both primitive values and objects, and it maintains reactivity even when the value is accessed or modified. On the other hand, reactive() is designed to work only with objects and may lose reactivity if the object is destructured. This distinction is crucial when managing reactive state in Vue 3, especially for ensuring that changes are properly tracked and reflected in the UI.

2. A parent component is trying to use a custom slot prop passed from a child component, but the data is not being received correctly. What is the most likely cause of this issue?

   1. The parent component is not using a named slot correctly.
   2. The child component is not using a scoped slot.
   3. The slot prop is not being passed correctly in the child component.
   4. The slot prop is being passed as a string instead of a number.

   Answer: C. The slot prop is not being passed correctly in the child component.

   The error is caused by not properly defining the slot prop in the child component. To fix this, the child component should define the slot with a specific prop, for example, `<slot :item="item" />`, and the parent component should use a scoped slot to access the prop, like `<template #default="{ item }">...</template>`. This allows data to be passed from the child to the parent through the slot props.

3. Which option is correct when deciding between using `ref` and `reactive` for form input in Vue?

   1. Use ref for both single values and objects with nested properties.
   2. Use ref for a single value and reactive for an object with nested properties.
   3. Use reactive for a single value and ref for an object with nested properties.
   4. Use reactive for both single values and objects with nested properties.

   Answer: B. Use ref for a single value and reactive for an object with nested properties.

   In Vue, `ref` is used for wrapping primitive values or objects that need to be reactive but do not require deep reactivity. On the other hand, `reactive` is used for creating a deep reactive proxy for objects, making all nested properties reactive. When working with form input, if you're dealing with a single value (like a text input), `ref` is appropriate. However, if you're working with an object that has nested properties (like a form object with multiple fields), `reactive` is the better choice because it provides deep reactivity.

4. Which statement accurately describes the behavior of a computed property in Vue?

   1. A computed property is not affected by changes in its dependencies.
   2. A computed property recalculates on every render.
   3. A computed property only works with primitive values.
   4. A computed property will not recalculate unless its dependencies change.

   Answer: D. A computed property will not recalculate unless its dependencies change.

   Computed properties in Vue are cached based on their dependencies. If the dependencies do not change, the computed property will not recalculate, ensuring optimal performance. This behavior is a core feature of computed properties, unlike watchers or regular methods, which recalculate on every render or change.

5. What is the behavior of the setup() function in Vue 3?

   1. The setup() function is called on every render and is used to define props and emits.
   2. The setup() function is used to define the component's template and is called once per component instance.
   3. The setup() function is the same as the created() hook in Vue 2 and is called once per component instance.
   4. The setup() function is called once per component instance and is used to initialize reactive state and logic.

   Answer: D. The setup() function is called once per component instance and is used to initialize reactive state and logic.

   The setup() function is called once per component instance and is used to initialize reactive state and logic. It is not called on every render, and it is not the same as the created() hook in Vue 2. The setup() function is not used to define props or emits, but rather to set up the component's internal state and logic.