(1/15) How do you import the core reactivity functions like ref, computed, watch in a Vue 3 SFC when not using <script setup>?

---

• They are automatically available on this
• import { ref, computed, watch } from 'vue'
• Vue 3 provides them as global variables by default
• They are not usable outside <script setup>

(2/15) In Vue 3, how do you dynamically assign a list of classes based on an object in your template?

---

• v-bind:attrClass="myObj" only in main.js
• :class="{ active: isActive, hidden: isHidden }"
• v-class:active="isActive" with watchers
• Use watchers to apply classes manually

(3/15) How can you retrieve query parameters like ?page=2 from the URL when using Vue Router in Vue 3?

---

• Query parameters are not supported by Vue Router
• They are automatically added to all component data properties
• You must parse window.location.search manually
• this.$route.query in Options API or useRoute() in Composition API

(4/15) What is the difference between 'onBeforeUnmount' and 'onUnmounted' in Vue 3?

---

• onBeforeUnmount fires right after the DOM is removed, onUnmounted fires right before removal
• onBeforeUnmount fires before the component is unmounted, onUnmounted fires after it’s removed from the DOM
• One is used only for SSR, the other only for client-side
• There is no difference; they are aliases

(5/15) Which statement about script setup in Vue 3 is accurate?

---

• It is a compile-time feature that replaces the need for export default and automatically exposes refs in the template
• It merges data, computed, and methods sections from multiple components into one file
• It only works in Node.js environments
• It requires mixing Options API with the Composition API

(6/15) Which method in a typical Vue 3 project setup is used to handle environment variables (e.g., specifying an API URL) when using Vite?

---

• Process them in watchers
• They are automatically stored in localStorage
• Read them from import.meta.env (e.g., import.meta.env.VITE_API_URL)
• Use a custom directive v-env

(7/15) When would you use Suspense in Vue 3?

---

• For error handling globally
• To disable watchers entirely
• Suspense is only used in server-side rendering and not in client-side
• To show a fallback while awaiting an async component or async setup in child components

(8/15) Which approach helps avoid watchers in Vue 3 if you only need to derive a new reactive value from existing references, for usage in templates or logic?

---

• Use defineProps for concurrency watchers
• Use a computed property that references the existing refs. Computed automatically re-calculates when dependencies change, no manual watchers needed
• Impossible to avoid watchers in Vue 3
• Use watchers in main.js for concurrency watchers only

(9/15) If you have multiple root nodes in your Vue 3 component, how does Vue handle them in the virtual DOM?

---

• You must wrap them in a single <div> or the component won’t compile
• The first node is the only one rendered
• You must place them in <template v-if>
• Vue 3 supports fragments, so multiple root nodes are placed in a single fragment

(10/15) In Vue 3, if you want a function to run exactly once when the app is created (and not per component), where would you put this code?

---

• Inside setup() of each component
• Directly in main.js (or main.ts) before or after calling createApp
• Inside a custom directive that triggers globally
• In the root App.vue's onMounted hook

(11/15) Which prop option should you use to force validation of a string type in a Vue 3 component?

---

• props: { myProp: { type: String, required: true } }
• props: { myProp: [String, Number] }
• props: { myProp: String }
• Define watchers on myProp

(12/15) In Vue 3, what is the main benefit of using shallowRef() for large data structures when you only update them as a whole?

---

• Prevents the initial render of the component
• Ensures watchers never trigger at all
• Optimizes performance by not deeply tracking nested changes
• Switches the reactivity system to legacy mode

(13/15) Which function in the Composition API can create a computed property that only depends on certain reactive sources you specify?

---

• watchEffect()
• markRaw()
• computed()
• reactive()

(14/15) What is a key difference between Vue 2's Filters and Vue 3?

---

• Filters were removed from the core in Vue 3, and you should use methods/computed instead
• Filters must be defined globally in Vue 3
• Filters in Vue 3 are now called transformations
• Filters are replaced by watchers in Vue 3

(15/15) In Vue 3 with <script setup>, how do you define a function so that it’s accessible in the template?

---

• Write watchers for it in data()
• Declare a const or function at the top level in <script setup>; it is automatically accessible in the template
• Use defineEmits for each method
• Use an export default with methods: { ... }

Submit