(1/20) Which lifecycle hook in Vue 3 would be the best place to perform an action right after any reactive data has changed but before the DOM is patched?

---

• onBeforeMount
• onUpdated
• onUnmounted
• onBeforeUpdate

(2/20) In Vue 3, if you define an async function inside setup() and await on API calls, which lifecycle hook are you effectively delaying?

---

• The entire app's mounting is blocked
• onBeforeMount runs twice
• onMounted
• No lifecycle is delayed unless you use Suspense or handle logic differently

(3/20) Which method can you use to detect or handle route changes globally (for example, to check authentication) in a Vue 3 + Vue Router app?

---

• Use watchers on every route component
• import watchRoute from 'vue' and call it in main.js
• router.beforeEach((to, from, next) => { ... })
• You cannot handle route changes globally in Vue 3

(4/20) How can you define 'scrollBehavior' for route transitions in Vue 3 using Vue Router?

---

• As part of createRouter options: scrollBehavior(to, from, savedPosition) { ... }
• Vue 3 no longer supports scroll behavior
• As a prop on the <router-view>
• In the setup() function of each component

(5/20) Which function in the Composition API allows you to run a cleanup function whenever dependencies change or the component unmounts?

---

• onBeforeUnmount()
• no function supports cleanup in Vue 3
• watch() or watchEffect() with a cleanup callback
• watchCleanup()

(6/20) What is the main benefit of using the Composition API over the Options API in Vue 3?

---

• It’s faster than any other JavaScript framework
• Better logic reuse and code organization
• It’s mandatory to use Composition API in Vue 3
• It completely removes the need for templates

(7/20) Which approach is recommended for passing large amounts of data between many deeply nested components in Vue 3?

---

• Use provide/inject or a global store like Pinia/Vuex
• Store it in the global window object
• Use watchers in each component to detect changes
• Emit custom events from child to parent repeatedly

(8/20) What is a key benefit of using the <script setup> syntax in Vue 3 Single File Components?

---

• It offers a more concise syntax and top-level await for Composition API
• It allows for options-based and composition-based APIs at the same time
• It automatically imports all dependencies without specifying them
• It merges the <template> and <script> sections into one file

(9/20) What is the difference between toRefs() and toRef() in Vue 3?

---

• None of these statements is correct
• They are the same function with different naming conventions
• toRefs() converts all properties of a reactive object into refs; toRef() creates a ref for a single property
• toRef() is used only for computed properties, while toRefs() is for data

(10/20) Which is a valid reason to use provide/inject in Vue 3 over passing props down multiple levels?

---

• You want to skip prop drilling across multiple nested components that only pass the data along
• Props are no longer supported in Vue 3
• You want watchers to ignore changes
• It automatically merges watchers globally

(11/20) How do you define watchers in Vue 3 if you only want to measure layout after certain data changes, ensuring the DOM is updated first?

---

• Use defineProps for concurrency watchers
• No approach to measure layout changes in watchers
• Use watchers in main.js for concurrency watchers only
• Set flush: 'post' so the watch callback runs after the patch, letting you measure or manipulate the updated DOM

(12/20) In Vue 3’s Composition API, which function can you use to create a read-only computed ref?

---

• watchEffect()
• computed() without a setter
• computed() with a setter only
• readonly()

(13/20) Which statement about migrating filters from Vue 2 to Vue 3 is correct?

---

• Vue 3 only supports custom directives, not filters
• Filters are now automatically globally registered
• Filters have been removed from the core, and you should replace them with methods or computed properties
• Filters were renamed to watchers in Vue 3

(14/20) Which feature in Vue 3 Single File Components can help you write your component logic using TypeScript without needing an additional configuration block?

---

• You must manually compile .ts files to .js
• <script type="typescript">
• No official support for TypeScript in SFCs
• <script setup lang="ts">

(15/20) If you need to share reactive data between multiple Vue 3 applications on a page, what might be a potential solution?

---

• Use route-based navigation guards
• This is not possible without a single root Vue instance
• Use watchers that poll data from each app
• Use a global variable outside of createApp() with reactive() or ref()

(16/20) If you want to share reactive data among multiple sibling components without repeatedly passing props or emitting events, which Vue 3 feature can help?

---

• Filters
• inject(…) from a parent’s provide(…)
• Use watchers in each sibling to replicate data
• Teleports

(17/20) How do you create a typed emitter for a Vue 3 component if you are not using <script setup> but still want TypeScript checks?

---

• In defineComponent, specify emits: { 'my-event': (payload: SomeType) => boolean } to validate the payload at runtime, optionally with TS type annotations
• Use global watchers for typed events
• Use watchers for event emission
• You cannot type events outside <script setup>

(18/20) How do watchers in Vue 3 handle concurrency if the user toggles a boolean prop multiple times quickly, referencing an async operation in the child?

---

• Use defineProps for concurrency watchers
• Each toggle triggers the watch callback. The child can call onInvalidate inside the callback to cancel the previous async if a new toggle arrives
• No concurrency approach for boolean toggles
• Use watchers in main.js for concurrency watchers only

(19/20) Which is a correct statement about custom directives in Vue 3?

---

• You must register custom directives globally in Vue 3
• Custom directives can be defined globally or locally using app.directive() or inside a component's directives option
• Directives are replaced by watchers in Vue 3
• Custom directives are no longer supported in Vue 3

(20/20) How do you define a custom directive in Vue 3 that changes an element’s background color only when it’s updated, not when first mounted?

---

• Directives can’t do updated logic in Vue 3
• Use watchers to track color changes
• Provide updated(el, binding) { ... } in the directive definition, ignoring mounted
• Use defineExpose for background color changes

Submit