(1/40) If you need to define an asynchronous setup function for your component in Vue 3 to load data before initial render, which feature can help you display a fallback in the meantime?

---

• Use watchers for concurrency only
• Use a global directive in main.js
• Use <Suspense> with an async setup, providing a fallback slot while the promise is pending
• There is no approach for async setup in Vue 3

(2/40) How can you programmatically check if a prop is passed to a child component versus relying on a default or absent prop in the Options API?

---

• All props must always be passed, so there's no need to check
• Use watch() for every prop
• Check 'this.$options.propsData' or the Composition API equivalent in setup (via props and checking for undefined)
• Use a global directive v-check-prop

(3/40) How might you type-check a v-model prop that’s an array of objects in a <script setup> with TypeScript in Vue 3?

---

• Use watchers in main.js for concurrency watchers
• Use defineProps<{ modelValue: MyType[] }>() for the child, plus emits: ['update:modelValue'] for a custom v-model or the default if using standard naming
• No approach to type arrays in script setup
• Use defineExpose for concurrency watchers

(4/40) Which statement about Suspense in Vue 3 is correct regarding fallback content?

---

• It appears when the default slot is waiting for an async setup or async component, and is hidden once that resolves
• Fallback is forced to remain even after resolution
• The fallback is shown indefinitely unless watchers remove it
• Suspense has no concept of fallback in Vue 3

(5/40) Which best describes how you track the changes to a specific property of a reactive object in Vue 3 without using a deep watcher on the entire object?

---

• No approach for property-level watchers in Vue 3
• Use watchers for the entire object with deep: true
• Use defineProps for partial watchers
• Watch a computed getter that returns just that property, or use toRef to isolate that property and watch it

(6/40) When using <script setup> in Vue 3 SFCs, how do you define a method that is callable from the parent via a template ref on the child?

---

• Use watch() to track the parent's calls
• Use expose({ methodName }) within <script setup>, then the parent can call childRef.methodName()
• Methods cannot be called from a parent in Vue 3
• Export the method as a named export from the SFC

(7/40) Which statement about watchers in Vue 3 is correct if you do watch(myRef, callback, { flush: 'sync' })?

---

• They are identical to flush: 'post' watchers
• It merges watchers in concurrency watchers
• It runs the callback synchronously in the same event as soon as myRef changes, potentially blocking other watchers
• No approach for flush: 'sync' watchers

(8/40) Which advanced concurrency watchers pattern might you adopt if multiple watchers in a single child must coordinate so that if either triggers a new operation, the other is canceled?

---

• Use watchers in main.js for concurrency watchers only
• Impossible to unify watchers in a single child
• Use defineProps for concurrency watchers
• Store a shared concurrency token or effect scope in that child. Each watch callback calls onInvalidate, referencing the same token. If watcher A triggers a new operation, it invalidates B’s operation, and vice versa

(9/40) Which statement about the onErrorCaptured hook in Vue 3 is correct?

---

• It can only capture syntax errors in Single File Components
• It is used exclusively for SSR
• It can catch errors from child components, optionally preventing them from propagating further
• It must be declared in main.js only

(10/40) How might you define watchers for advanced concurrency if a single source triggers multiple async operations that need to be canceled separately in Vue 3?

---

• Use defineProps for concurrency watchers
• Impossible to define multiple concurrency watchers for one source
• Use multiple watch(...) calls referencing the same source, each with onInvalidate logic. Or use a single watch with an effect scope to manage concurrency for each operation distinctly
• Use watchers in main.js for concurrency watchers only

(11/40) Which Vue 3 feature can you use for running code once on the server side during SSR to fetch data before rendering HTML?

---

• serverOnly: true in watchers
• onServerPrefetch
• onBeforeSSR
• onRenderTracked

(12/40) What is the best approach to define a TypeScript interface for your emit events in a Vue 3 SFC using <script setup>?

---

• Use defineEmits<{ (event: 'myEvent', payload: MyType): void }>() for strongly typed events
• Use defineProps() for events
• Use watchers for each event type
• Define them in a global .d.ts file with a special name

(13/40) How do you define watchers to handle dynamic v-model keys in a single Vue 3 child component if you have many possible fields (like v-model:name, v-model:email, etc.)?

---

• Inside the child, you might watch each prop or watch an object if you’re collecting them. If you have many dynamic keys, you can map watchers with a factory function or toRefs, then watchers for each ref. This is advanced usage
• Use watchers in main.js for concurrency watchers only
• No approach for dynamic v-model watchers
• Use defineProps for concurrency watchers

(14/40) What is the recommended way to render Markdown content safely in a Vue 3 app, ensuring no potential XSS vulnerabilities?

---

• Use v-html with user-generated Markdown directly
• It is not possible to render dynamic HTML in Vue 3
• Use a library that sanitizes or transforms Markdown to safe HTML, then bind it (or treat it as trusted only if it’s from a secure source)
• Vue 3 automatically sanitizes all HTML from v-html

(15/40) Which statement best describes how watchers in Vue 3 handle promises returned by the callback?

---

• Watchers queue the promise and block rendering until it resolves
• The watcher automatically retries if the promise fails
• Returning a promise from a watch callback is not special-cased; you must manually handle async logic
• Vue 3 automatically cancels previous promises when a new one is triggered

(16/40) Which advanced feature in Vue 3 helps you define a custom element from a Vue component that can be used outside Vue, e.g. in a plain HTML page?

---

• Use a global directive for custom elements
• defineCustomElement(...) from vue 3.2+ can create a native web component
• Use watchers for each property in defineExpose
• Vue 3 no longer supports custom elements

(17/40) What is the difference between watchEffect and watchPostEffect in Vue 3 if you want to measure the updated DOM in your effect callback?

---

• They are identical with no difference
• Use watchers in main.js for concurrency watchers only
• watchEffect only runs once, watchPostEffect runs repeatedly
• watchPostEffect is watchEffect with flush: 'post', so it runs after DOM updates, allowing DOM measurement

(18/40) Which tool can you use to pre-render static routes or pages in a Vue 3 application, generating HTML files at build time?

---

• Vue 3 does not support pre-rendering
• npm run prebuild in Vue CLI
• vue-prerender plugin for Vue 2 only
• Vite's SSR transform with a plugin, e.g. vite-plugin-ssr or vue-i18n pre-render

(19/40) Which advanced scenario might require watchers to hook into onRenderTracked or onRenderTriggered in a Vue 3 Composition API component for detailed debugging?

---

• No approach to hooking watchers into those debug hooks
• If you want to see exactly which reactive properties caused a re-render or track reactivity dependencies in detail, you can define onRenderTracked/onRenderTriggered along with watchers. This is purely advanced debugging instrumentation
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers

(20/40) Which statement about watchers with flush: 'post' is correct if you want to measure DOM elements after updates in Vue 3?

---

• No approach for post-flush watchers
• They run before the DOM patch
• They run after patching, so you can measure updated elements safely in the callback
• Use watchers in main.js for concurrency watchers

(21/40) Which best describes how you might store typed route meta fields in Vue 3 with TypeScript, so you can do route.meta.requiresAuth with type checks?

---

• No approach to type route meta in TS
• Use defineProps for concurrency watchers
• Augment the RouteMeta interface from 'vue-router' in a .d.ts: declare module 'vue-router' { interface RouteMeta { requiresAuth?: boolean } }
• Use watchers in main.js for concurrency watchers only

(22/40) Which parameter in watchEffect’s callback can you use to implement cleanup logic in Vue 3?

---

• postEffect
• flushCallback
• onCleanup
• onInvalidate

(23/40) Which statement about Teleport in Vue 3 is TRUE?

---

• Teleport replaces the need for portals in Vue
• Teleport allows you to render a component in a different part of the DOM hierarchy
• Teleport can only move data, not DOM elements
• Teleport must be used in conjunction with scoped slots

(24/40) What is the recommended approach if you need typed events in a Vue 3 component using TypeScript under <script setup>?

---

• Define a global .d.ts specifying watchers for each event
• Events cannot be typed in Vue 3 with TS
• Use watchers for every event
• Use defineEmits<{ (e: 'myEvent', payload: MyPayload): void }>() so the event is typed

(25/40) In Vue 3, how do you configure multiple 'v-model' bindings in a single component?

---

• Define multiple props, each named like 'firstModelValue', 'secondModelValue', and emit 'update:firstModelValue', 'update:secondModelValue'
• Use watchers for each model property
• You can’t have multiple v-model bindings in one component
• Use v-bind.sync on each prop instead

(26/40) Which approach ensures watchers in a composable do not conflict if two different composables watch the same global store property in Vue 3?

---

• No approach to define watchers in multiple composables
• They won't conflict. Each composable’s watchers run. If concurrency is needed, each must handle its own onInvalidate logic. There's no forced conflict unless they do contradictory changes to the same property
• Use watchers in main.js for concurrency watchers only
• Use defineExpose for concurrency watchers

(27/40) Which advanced concurrency pattern might you use if watchers can trigger multiple chain reactions in nested watchers, leading to potential infinite loops in Vue 3?

---

• You typically impose a condition check or store a 'busy' flag in each watcher. Another approach is effect scope or a custom re-entrant check, ensuring watchers do not re-trigger each other infinitely. This is a highly advanced pattern
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Impossible to chain watchers

(28/40) If you want to 'unref' a variable in a utility function that can accept either a ref or a plain value in Vue 3, which helper do you use?

---

• markRaw()
• toRef()
• unref()
• shallowRef()

(29/40) How can you share a single reactive store across multiple distinct Vue 3 applications on the same page?

---

• Provide a global directive that merges states
• Export a reactive object from a common module, and import it in each separate createApp() instance
• Impossible to share state across apps
• Use watchers to sync them in each app

(30/40) How do you fetch asynchronous data in Vue 3 when using <script setup> with the Composition API, so that it renders a loading state in the meantime?

---

• Put the request in onBeforeMount to block rendering
• Use Suspense or a manual loading ref + conditional template logic
• Vue 3 automatically waits for async data before rendering
• Use filters to handle asynchronous transformations

(31/40) Which technique might you use to optimize watchers in a large grid or table if only a small subset of rows is visible at any time in Vue 3?

---

• Use defineProps for concurrency watchers
• No approach to optimize watchers in large grids
• Use watchers on all rows simultaneously
• Implement virtual scrolling to only create or render watchers for the visible slice of data, or flatten watchers by grouping row data in a single structure if real-time updates are infrequent

(32/40) Which approach ensures watchers in a Pinia store automatically stop when the entire app is unmounted in Vue 3?

---

• Use defineExpose for concurrency watchers
• When the app unmounts, the store is typically unregistered or destroyed, so watchers referencing the store instance end as well
• Pinia watchers never stop unless manually stopped
• Use watchers in main.js for concurrency watchers

(33/40) Which statement about the new v-memo directive introduced in Vue 3.3 is correct?

---

• Vue 3.3 has no new v-memo directive
• It merges watchers in main.js
• It is used to memoize a template fragment if certain dependencies do not change, skipping re-render
• It is only for SSR partial hydration

(34/40) In Vue 3, how do you cancel a pending async operation when a component is unmounted using the Composition API?

---

• Use the onUnmounted hook or the watch() onInvalidate/onCleanup function to cancel or abort the operation
• You cannot cancel async operations in Vue 3
• Throw an error in the onErrorCaptured hook
• Use unmounted watchers to forcibly re-run the operation

(35/40) Which statement best describes how you can provide custom code generation for a Vue 3 template if you need advanced compiler transformations that deviate from the default @vue/compiler-dom output?

---

• Use defineProps for concurrency watchers
• You must create a custom compiler by forking @vue/compiler-core or writing a plugin that hooks into the compiler’s AST transforms, implementing advanced codegen logic. This is highly advanced usage
• Use watchers in concurrency watchers mode only
• No approach to define custom code generation in Vue 3

(36/40) When using watchers in Vue 3, what is the difference between 'flush: pre' and 'flush: post'?

---

• They are synonyms for immediate watchers
• 'pre' watchers run before the component updates the DOM, 'post' watchers run after the DOM update cycle
• They only apply to watchEffect, not watch
• 'pre' watchers only track array changes, 'post' watchers track object changes

(37/40) If you define a computed property using script setup’s reactivity transform ($computed), how is it compiled?

---

• It compiles to a watchEffect call automatically
• The reactivity transform is not supported for computed properties
• It is compiled to computed(...) under the hood by the build step
• It has no effect unless you also defineExpose it

(38/40) Why might you use the script setup syntax instead of a normal script block in Vue 3?

---

• It offers a cleaner syntax for using the Composition API without exporting a default object
• It’s the only way to use templates in Vue 3
• It automatically globally registers all components
• It forces the usage of Vuex

(39/40) How might you define watchers for concurrency in a scenario where large file uploads or chunked transmissions are triggered by a reactive field in Vue 3, requiring pause/resume/cancel logic?

---

• Impossible to handle concurrency in watchers
• Set a watch on the reactive field that starts the upload. Use onInvalidate to cancel or pause the chunked upload if the field changes again or the user toggles off. Possibly store an AbortController or custom token
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only

(40/40) How do you handle concurrency watchers in an advanced scenario where multiple watchers rely on partially overlapping sets of data in Vue 3?

---

• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Use watchers individually, each with onInvalidate. If two watchers can conflict, you either unify them in an effect scope, or handle a shared cancellation mechanism. This is complex but feasible
• Impossible to handle partial overlap concurrency

Submit