(1/40) Which approach might you take if your watchers in Vue 3 are firing multiple times quickly and you want to handle concurrency with user input across many fields?

---

• Use defineProps for concurrency watchers
• Group the fields in an array watch, or define watchers for each field but handle concurrency in each callback with onInvalidate. Alternatively, consider a debounced approach so you don’t spam the watcher callback
• Use watchers in main.js for concurrency watchers only
• Impossible to handle concurrency for multiple fields

(2/40) Which statement about the 'suspense' feature in Vue 3 is correct?

---

• It forces the entire app to pause until data is fetched
• It only works with client-side rendering and no fallback content
• It can display fallback content while async components or setup calls are not yet resolved
• It is a directive for conditional styling

(3/40) What is the purpose of vue-global-api in the context of Vue 3?

---

• It is the official recommended library for state management
• To manage watchers globally
• To define an error boundary
• To revert to Vue 2's global API usage in Vue 3 (like Vue.use, Vue.component)

(4/40) How do you force reactivity to detect changes to a property that might not be directly observable in Vue 3, like adding a new key to an object?

---

• Use markRaw on the entire object
• Use watchers with deep: false
• In Vue 3, proxies handle new keys automatically, so no special method is required
• Use Vue.set() as in Vue 2

(5/40) What is the purpose of the defineEmits() macro in a <script setup> block?

---

• To define which events a component can emit
• To register a global event bus
• To define watchers for prop changes
• To define custom directives within the component

(6/40) Which approach in Vue 3 helps you build a custom renderer to target something other than the DOM (e.g., canvas or native)?

---

• Implement watchers for each platform event
• Vue 3 does not allow custom renderers
• Use createRenderer from @vue/runtime-core and provide the necessary rendering methods for your platform
• Use defineRenderer in main.js

(7/40) If you want to remove an existing directive globally in Vue 3, how might you do it?

---

• app.undirective() with the directive name
• Vue 3 does not provide an API to remove a global directive once registered, so you’d create a new app instance without it
• Use defineExpose to remove the directive
• Use watchers in main.js for each directive removal

(8/40) Which approach might you take if you want typed code for watchers on a Pinia store state in Vue 3 using TypeScript?

---

• Use defineProps for concurrency watchers
• In your store, define the state with TS types. Then in a component, import the store and do watch(() => store.someState, (newVal) => { ... }), letting TS infer the type of store.someState
• No approach for typed store watchers in TS
• Use watchers in main.js for concurrency watchers only

(9/40) Which concurrency watchers pattern might you adopt if your watch callbacks themselves create further watchers in Vue 3, forming a layered system of watchers that must all be canceled if the original source changes again?

---

• Use defineProps for concurrency watchers
• You can store each nested watcher’s stop handle or effect scope in onInvalidate of the parent watcher. If the parent re-runs, it calls stop() on the child watchers, thus cleaning up the entire chain. Very advanced usage
• Impossible to create nested watchers
• Use watchers in main.js for concurrency watchers only

(10/40) How might you unify watchers from multiple child components into a single concurrency manager in a parent, so the parent can cancel child watchers if certain conditions arise in Vue 3?

---

• Use watchers in main.js for concurrency watchers only
• Impossible for parent to cancel child watchers
• Use defineProps for concurrency watchers
• A child’s watchers belong to that child’s instance. If you truly want the parent to control them, the child must provide a manual stop function or share an effect scope object with the parent, letting the parent call scope.stop() or watchers[i].stop()

(11/40) What is a scenario where watchPostEffect might be more suitable than watchEffect in Vue 3?

---

• When you want to block rendering altogether
• When you need the effect to run only once on mount
• When you want the effect to run after the DOM update (post-patch), such as measuring newly rendered elements
• When you need oldVal and newVal

(12/40) Which statement about watchers with { deep: true } in Vue 3 is correct?

---

• It only works with route objects, not normal data
• It tracks nested changes in arrays/objects, but can be expensive if the structure is large
• deep watchers are removed in Vue 3
• All watchers are deep by default in Vue 3

(13/40) Why might you choose a functional component in Vue 3 (using the functional: true or a pure function syntax)?

---

• Functional components have their own reactive state
• They do not have lifecycle hooks, making them lightweight and faster to render if no reactivity is needed
• They automatically manage global state
• They can only be used with SSR

(14/40) Which approach is recommended if you have watchers with concurrency logic for large file uploads, but also want to maintain them across route changes in Vue 3 (like a persistent upload manager)?

---

• Define them in a global store or effect scope outside the router’s unmount cycle, e.g. a Pinia store or a custom reactivity module that does not reset on route navigation. This way watchers remain alive
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Impossible to keep watchers across route changes

(15/40) If you have a nested object in a reactive() store, and you want to watch only a specific nested property, which approach is recommended?

---

• Vue 3 does not support nested watchers
• Use toRef(obj, 'nestedKey') to create a ref pointing to that property and watch the ref
• Use a deep watcher on the entire object only
• You must replace the entire store with a new object each time

(16/40) How do you define watchers for concurrency if you want to combine data from both SSR onServerPrefetch and client mount in Vue 3, ensuring duplication or stale data is canceled post-hydration?

---

• Use watchers in main.js for concurrency watchers only
• onServerPrefetch fetches initial data. On the client, watch(...) or onMounted logic checks if new data is needed. You can store an abort token or version ID to skip or cancel redundant fetch calls if the SSR data is still valid
• Use defineProps for concurrency watchers
• Impossible to unify SSR and client watchers

(17/40) Which statement about globalProperties in Vue 3 is correct?

---

• You should never use globalProperties in Vue 3
• globalProperties is a built-in Vue 3 directive
• globalProperties are automatically reactive in the entire app
• app.config.globalProperties allows you to add global variables or functions accessible within the app instance

(18/40) How do you define a custom renderer for Vue 3 to target platforms other than the DOM?

---

• Use createRenderer from the 'vue' package and pass in platform-specific methods
• Override the default renderer in main.js
• Vue 3 no longer supports custom renderers
• Use the built-in customRender() function

(19/40) Which statement about using toRef() in Vue 3 is correct?

---

• It deeply clones the object property
• It unsubscribes watchers automatically
• It is only used for arrays, not objects
• It creates a ref pointing to a specific property on a reactive object, preserving reactivity for that property alone

(20/40) Which approach in Vue 3 helps you to revert to a previous state if new data changes are invalid, often used in watchers with concurrency logic?

---

• Use defineProps for all revert operations
• Use the onInvalidate callback in watch or watchEffect to clean up or revert if a new change arrives quickly
• Impossible to revert states in watchers
• Use watchers with deep: true

(21/40) If a Vue 3 application has <script setup> with defineProps, how do you also define a normal JavaScript or TypeScript export from the same file?

---

• Export them in defineExpose
• Declare exports after the <script setup> block in a separate <script> or outside the SFC content
• It is not possible to have normal exports
• Use watchers for each exported variable

(22/40) Which advanced technique might you use if you want to control the flush timing of watchers for an extremely performance-critical Vue 3 application with deep nested updates?

---

• Set flush: 'sync' or flush: 'post' on certain watchers, or createEffectScope to batch watchers, and carefully measure update times to avoid blocking
• Impossible to control watchers flush timing in Vue 3
• Manually trigger watchers using watchers array in main.js
• Use defineProps with concurrency watchers

(23/40) Which statement accurately describes how to create a custom error boundary in Vue 3?

---

• Wrap components in a try/catch block in the template
• Use error watchers on each child ref
• Use an <ErrorBoundary> component from vue core library
• Implement errorCaptured option or onErrorCaptured() hook in a parent component

(24/40) Which statement about script setup’s top-level await in Vue 3 is correct?

---

• It only works if you define a watchers array
• It allows you to await asynchronous logic directly in script setup, but will block component rendering until it resolves (unless used with Suspense)
• It triggers watchers on every call
• Vue 3 does not allow top-level await

(25/40) How might you run a piece of code each time a reactive property changes, but also have a cleanup function that cancels the previous run in Vue 3?

---

• Use watch(..., (newVal, oldVal, onCleanup) => {...}) and call onCleanup(() => ...) to handle cancellation
• Use computed properties to cancel previous runs automatically
• Use watchers on the entire store only
• This is not possible in Vue 3

(26/40) Which Vue 3 approach is recommended to create an error boundary, catching errors within child components?

---

• Use onErrorCaptured((err, instance, info) => { ... }) in a parent component
• Use defineProps and mark them as error-checking
• Define watchers for each child property
• Wrap everything in <transition>

(27/40) Which statement about the Composition API's 'setup()' function is correct regarding the component’s lifecycle?

---

• setup() is not a lifecycle function
• setup() is called before the component is created and before props are resolved
• setup() runs after onMounted
• setup() runs only after the template is compiled

(28/40) Which statement about shallowReactive in Vue 3 is TRUE?

---

• It’s the same as markRaw
• It is removed in Vue 3.3+
• It tracks only top-level property assignments, ignoring nested object changes for performance reasons
• It tracks deep mutations but not top-level changes

(29/40) How do you define watchers for concurrency that unify route transitions and WebSocket push events in a single callback in a Vue 3 application, ensuring no conflicting updates?

---

• Use defineProps for concurrency watchers
• Watch an array of sources, e.g. [() => route.fullPath, () => socketState.someField], with concurrency logic in the callback’s onInvalidate. Alternatively, define separate watchers but unify them in a shared manager object
• Use watchers in main.js for concurrency watchers only
• Impossible to unify route watchers with WebSocket in one callback

(30/40) What change did Vue 3 introduce regarding filters?

---

• Filters are removed from the core library and are no longer supported as in Vue 2
• Filters only work with the Composition API
• Filters are now mandatory for formatting data
• Filters were moved to a separate package

(31/40) What does the unref() function do in Vue 3?

---

• It returns the raw value of a ref if it's a ref, otherwise returns the value as is
• It removes watchers from a ref
• It unmounts the component from the DOM
• It unsubscribes from reactive dependencies

(32/40) If you want to watch a function that returns an object, ensuring the watch callback fires when any nested property changes, what must you do in Vue 3?

---

• Manually patch the object in the callback
• Watch the entire app instance
• Use v-if on the object property in the template
• Use a deep watcher: watch(() => getObject(), callback, { deep: true })

(33/40) Which approach in Vue 3 can you use to handle large data sets in lists, to avoid performance bottlenecks?

---

• Combine them into a single root element forcibly
• Implement virtual scrolling or pagination to reduce DOM elements
• Use watch() for each row
• Vue 3 automatically handles large lists with watchers

(34/40) Which is a valid way to define typed props for an enum-based value in a TypeScript Vue 3 SFC with <script setup>?

---

• Use defineExpose for typed enumerations
• Enums are not accepted in defineProps
• Use defineProps<{ status: MyEnum }>() and pass the enum type from your .ts code
• Use watchers for the entire enum

(35/40) How might you define watchers for concurrency in a very large form that includes sub-forms, each in a separate child component, but all referencing the same global store in Vue 3?

---

• Use defineProps for concurrency watchers
• Impossible to define watchers across multiple children
• Use watchers in main.js for concurrency watchers only
• Each child can watch the relevant slice of global store data. For concurrency that spans sub-forms, either unify watchers in the store itself or share an effect scope. If you must unify them, you can define a concurrency manager in the store hooking watchers for each sub-form’s data

(36/40) In Vue 3, which function is used to define a plugin that can be installed via app.use()?

---

• Plugins can only be created using Vue.mixin
• A plugin is just an object with an install(app) method
• definePlugin()
• createPlugin()

(37/40) Which statement about customizing the reactivity system to skip certain properties in Vue 3 is correct?

---

• You can use markRaw(obj) so the entire object is not reactive, or defineProperties on the object with Symbol for skipping. There’s no official partial skip for a single property except shallowReactive or ignoring it from the initial data before reactivity conversion
• Vue 3 does not allow skipping properties, everything is reactive
• Use defineProps for concurrency watchers only
• Use watchers in concurrency watchers mode to skip

(38/40) Which advanced technique can help you transform watchers at compile time for specialized build requirements, e.g. logging or instrumentation, in a Vue 3 codebase?

---

• Use defineProps for concurrency watchers
• No approach to transform watchers at build time
• Use watchers in main.js for concurrency watchers only
• A custom Babel or Vite plugin that scans for watch(...) calls in SFC script code, injecting instrumentation logic. This is advanced and not officially documented, but feasible

(39/40) Why might you use the 'expose()' function in <script setup>?

---

• To expose watchers to the global scope
• To expose props to the parent
• expose() is not a valid function in Vue 3
• To expose component internals (like methods) when using template refs on a child component

(40/40) In Vue 3, what does 'optimistic UI' generally refer to?

---

• Using watchers to block data updates until the server responds
• Forcing the user to confirm every action with a popup
• Updating the UI immediately before the server confirms the action (e.g., a quick local state change that might be rolled back if the server fails)
• Rendering of placeholders while data is being fetched server-side

Submit