(1/40) Which statement about the difference between watchEffect and watchPostEffect in Vue 3 is correct?

---

• watchEffect triggers only on mount, watchPostEffect triggers only on unmount
• watchEffect runs after the DOM update, watchPostEffect runs before the DOM update
• watchPostEffect defers its callback until after DOM patch, whereas watchEffect runs before that patch
• They are identical in flush timing

(2/40) How do you define watchers for concurrency if you want to capture oldVal/newVal for an array’s object changes in Vue 3?

---

• Impossible to see oldVal for array object changes
• Use watchers in main.js for concurrency watchers only
• You’d do a deep watch: watch(() => arrayRef.value, (newArr, oldArr, onInvalidate) => ..., { deep: true }). Then you can compare items if needed, handle concurrency with onInvalidate
• Use defineProps for concurrency watchers

(3/40) Which advanced technique in Vue 3 can allow partial reactivity transforms for an object, turning only a subset of its properties into computed or watchers while ignoring the rest?

---

• No approach to partial transform
• Use toRef or toRefs on the properties you want to track, or define a custom reactivity transform plugin that only rewrites certain properties. This is advanced and requires manual scoping or Babel config
• Use watchers in concurrency watchers mode only
• Use defineProps for concurrency watchers

(4/40) If you have watchers that must not run during SSR but do need to run in client hydration to finalize DOM-based logic in Vue 3, what pattern might you use?

---

• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• A runtime check if (typeof window !== 'undefined') for watchers or define the watchers in onMounted to ensure they only exist client-side, skipping SSR. Alternatively, you can do a short-circuit in the callback for SSR detection
• Impossible to skip watchers in SSR

(5/40) How can watchers in Vue 3 track a local property in a Pinia store if that store is used by multiple components concurrently, each possibly changing the property quickly?

---

• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Impossible to watch store changes in multiple components
• The watchers in each component run when the store property changes. For concurrency, each can handle onInvalidate if the store triggers multiple rapid changes. There's no global approach unless you define watchers in the store itself

(6/40) What advantage does the new createApp API in Vue 3 offer, compared to Vue 2’s global Vue instance?

---

• There is no difference; it’s just renamed
• You can create multiple app instances, each with its own configuration and plugins
• It removes the possibility of using directives
• It forces one single global configuration

(7/40) Which statement about the flush options in watch() for Vue 3 is correct (pre, post, or sync)?

---

• pre is the default, watchers run before DOM patch, post runs after DOM patch, sync runs immediately as data changes
• pre means watchers run after DOM patch, post means before patch, sync merges watchers in the same tick
• Vue 3 does not have flush options for watchers
• They are only used for concurrency watchers

(8/40) When might you need to use shallowReadonly in Vue 3?

---

• shallowReadonly does not exist in Vue 3
• If you want top-level properties to be read-only, but let nested objects remain mutable
• It merges watchers globally in the root
• If you want to deeply track mutations in an object

(9/40) Which statement about shallowReadonly in Vue 3 is correct regarding re-exporting complex data from a composable library?

---

• It merges watchers for concurrency watchers
• It deeply prevents writes in nested objects
• No approach for shallowReadonly in Vue 3
• It only prevents top-level property mutations, letting nested objects remain writable. A library might return a shallowReadonly for safe outer access but keep internal mutations possible

(10/40) How might you optimize large lists for performance in Vue 3?

---

• Use keep-alive for each v-for element
• It is impossible to optimize large lists in Vue
• Use v-turbo directive to automatically optimize lists
• Implement pagination or virtual scrolling with third-party libraries

(11/40) In Vue 3, what does the 'patchFlag' concept refer to in the internal virtual DOM optimization?

---

• A manual code-splitting marker for lazy loading
• Metadata added by the compiler to indicate which parts of the template are dynamic vs. static
• A custom directive that patches the DOM manually
• A feature only used in Vue 2 for reactivity

(12/40) In the Composition API, how can you define a watcher that only triggers when the watched source changes from one non-undefined value to another?

---

• Set watch option immediate: false
• Use the flush: 'post' option
• It always triggers once by default
• Use watchPostEffect()

(13/40) When you define watchers for concurrency referencing a route param plus a local state in the same callback in Vue 3, how does it handle changes that occur simultaneously?

---

• Use watch([() => route.params.id, () => localState.value], ([newId, newLocal], [oldId, oldLocal], onInvalidate) => { ... concurrency logic ... }) merges them in one callback fired once per flush cycle with the final values
• Use defineProps for concurrency watchers only
• Impossible to watch route param and local state together
• Multiple watchers in concurrency watchers

(14/40) How does the new VNode static hoisting work in Vue 3 to improve performance?

---

• It disables watchers for all text nodes
• It merges all dynamic parts into a single node
• It marks static parts of the template so they are never re-evaluated on subsequent renders
• Vue 3 no longer uses VNodes internally

(15/40) In Vue 3, how do you programmatically unmount a component that was created with createApp()?

---

• Call removeEventListener on the global window object
• Call app.destroy()
• It is impossible to unmount in Vue 3
• Call app.unmount() on the same DOM element you used for mount()

(16/40) When calling defineAsyncComponent in Vue 3, which parameter allows you to specify a component to show while the async component is being loaded?

---

• placeholder: { ... }
• preloadComponent
• onBeforeMount
• loadingComponent

(17/40) When referencing watchers in the same flush cycle for multiple changes, how does Vue 3 handle the final callback calls if flush is set to 'pre'?

---

• It runs watchers before the DOM updates, merging synchronous changes into one final state. Each watch sees the final change in that flush, unless flush: 'sync' is used to see intermediate changes
• It runs watchers after the DOM update
• Impossible to define watchers with flush: 'pre'
• Use watchers in main.js for concurrency watchers only

(18/40) Which new feature in Vue 3.3+ or future versions aims to allow partial hydration or partial activation of components during SSR, avoiding overhead for fully static sections?

---

• Use watchers in concurrency mode only
• No approach for partial hydration in Vue 3
• v-if:hydrate directive
• Deferred hydration using per-component control or partial directive proposals (still experimental). The official name is not fully finalized, but partial hydration is an active discussion in Vue’s RFCs

(19/40) What is a key difference between 'watchEffect()' and a normal 'watch()' in Vue 3?

---

• watchEffect() requires a list of dependencies to be manually declared
• watchEffect() is only compatible with onMounted
• watchEffect() does not allow cleanup functions
• watchEffect() automatically tracks any reactive variables used inside its callback

(20/40) When performing SSR (Server-Side Rendering) with Vue 3, which statement is TRUE?

---

• Server-side rendering is not possible in Vue 3
• You must always use nextTick to load components on the server
• SSR requires a custom directive to parse templates
• You can use the @vue/server-renderer package to render the app to HTML on the server

(21/40) What does the 'flush: post' option do when you use watch() in the Composition API?

---

• It makes the watcher run after the DOM has updated
• It makes the watcher run at the start of the next event loop tick
• It disables the watcher entirely
• It only applies for watchers of computed properties

(22/40) When building a library with defineCustomElement in Vue 3, how do you handle global mixins or globalProperties that the standard createApp scenario usually provides?

---

• They are automatically injected into all custom elements
• Use watchers in defineExpose for concurrency
• Use defineProps for concurrency watchers
• Global mixins and properties are unavailable in custom elements, so you must replicate needed logic or rely on external injection approaches

(23/40) Which approach ensures watchers in a large Vue 3 SPA do not degrade performance if you only need to watch a subset of deeply nested changes?

---

• Create watchers for only the relevant properties or use toRef / toRefs for those nested properties, avoiding a blanket deep watch on the entire structure
• Use defineProps for concurrency watchers
• Use watchers with deep: true for the entire store
• No approach to selective watchers in Vue 3

(24/40) When building a custom element via defineCustomElement in Vue 3, how can you style it using the Single File Component’s <style> section?

---

• Use only global CSS in main.js
• Use watchers to dynamically inject style tags
• Use <style scoped> in the SFC, which will be converted into shadow DOM styles
• You cannot style custom elements from within the SFC

(25/40) Which statement about watchers in a Vue 3 SSR environment is correct regarding how watchers run on the server?

---

• They do not run at all in SSR by default, since there's no DOM or persistent reactivity cycle for watchers
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• They run identically to client watchers

(26/40) How can you reference the parent component instance if you are inside a deeply nested child using the Composition API in Vue 3?

---

• Use defineProps to define watchers for the parent
• Use the global watchers in main.js
• Vue 3 does not allow referencing parent
• Inject the parent instance via provide/inject if the parent provides it, or use getCurrentInstance and walk up .parent if absolutely needed

(27/40) Which statement about watchPostEffect in Vue 3 is correct regarding flush timing?

---

• It merges watchers for concurrency
• It flushes after the DOM update cycle (flush: 'post'), letting you measure or manipulate updated elements
• It is identical to watchEffect with no difference
• It is used to forcibly sync watchers in the same tick

(28/40) How do you create a custom render function for advanced usage in Vue 3?

---

• Vue 3 disallows custom rendering strategies
• Using the createRenderer function from 'vue' to implement platform-specific rendering logic
• By passing a config object to createApp with render options
• By customizing the default createApp() call

(29/40) When building a custom directive in Vue 3, which directive lifecycle hook is triggered when the bound element is updated (but not unmounted) in the DOM?

---

• mounted
• unmounted
• updated
• beforeMount

(30/40) What is the main usage of the 'v-bind.sync' modifier in Vue 2 and how is it replaced in Vue 3?

---

• It handled server prefetch logic; in Vue 3, we use Suspense
• It only existed for arrays, replaced by computed properties in Vue 3
• It was used to sync watchers across multiple components; Vue 3 removed it entirely with no replacement
• It synced child data to parent watchers; in Vue 3, we use custom v-model with modelValue and update:modelValue

(31/40) Which new feature in Vue 3.2+ can help you define advanced typed component options, like name or inheritAttrs, in a <script setup> block?

---

• defineProps only
• defineOptions macro, e.g. defineOptions({ name: 'MyComp', inheritAttrs: false })
• No approach to define advanced component options in script setup
• Use watchers in main.js for concurrency watchers

(32/40) Which lifecycle hook in Vue 3 allows you to intercept an error from a child component's lifecycle or rendering and optionally stop it from propagating further?

---

• onFailedMount
• onServerPrefetch
• onUnmounted
• onErrorCaptured

(33/40) How might watchers in a composable handle concurrency if you rely on the parent's route changes, and the composable is injected in multiple child components in Vue 3?

---

• Use defineProps for concurrency watchers
• Each child calling the composable sets watchers referencing route data if that's passed to the composable. Each usage has its own concurrency. Alternatively, you can define a single composable used globally, but concurrency is still local to each instance unless coded otherwise
• Use watchers in main.js for concurrency watchers only
• Impossible to watch route in a composable

(34/40) Which lifecycle hook in Vue 3 Composition API is analogous to beforeRouteUpdate from Vue 2's router usage?

---

• onBeforeUpdate
• onErrorCaptured
• onActivated
• No direct Composition API hook. You usually use router's composition-based hook or a global route guard instead

(35/40) How can watchers in Vue 3 handle concurrency if you define a single watch(() => multipleFields) approach for a multi-field object and the user changes multiple fields simultaneously?

---

• Use watchers in main.js for concurrency watchers only
• Impossible to handle concurrency with multiple fields
• Use defineExpose for concurrency watchers
• The watch triggers once after the flush. If you do an async call, onInvalidate will be called if there's another flush cycle. You handle concurrency by checking onInvalidate or storing partial states if needed

(36/40) What’s a key advantage of Pinia over Vuex in Vue 3?

---

• Pinia is lighter, has a simpler API, and is officially recommended as the new store for Vue 3
• Vuex 4 is no longer compatible with Vue 3
• Pinia completely replaces the Composition API
• Pinia can only manage data for single components

(37/40) In a Vue 3 SFC using <script setup lang="ts">, how do you define a method that can be called by the parent via a template ref?

---

• Use defineExpose({ myMethod }) inside <script setup>. The parent can do childRef.myMethod() if the child is ref="childRef"
• Use watchers in main.js for concurrency watchers
• No approach to call methods from parent in script setup
• Use defineProps for concurrency watchers

(38/40) Which statement accurately describes how to access 'attrs' in the Composition API for a component that does not define certain props?

---

• They are automatically bound to 'this.attrs' in setup
• All unknown attributes are lost in Vue 3
• You must import useAttrs() from 'vue' and call it in setup() to obtain any extraneous attributes
• You must define a special unrecognizedProps property in the component

(39/40) What is the default flush timing for watch() in the Composition API if not specified?

---

• post
• immediate
• sync
• pre

(40/40) If you have a large array and only need to re-render when an item is added or removed (not mutated in place), which approach could optimize performance?

---

• Use watchers for each index
• Push or splice the original array to re-render every time
• Store the array in a shallowRef, so adding or removing triggers a new reference assignment if you do arr.value = newArr
• Use onServerPrefetch to handle reactivity

Submit