(1/45) Which statement about watchers is correct if you watch(() => [aRef.value, bRef.value]) in Vue 3, ignoring oldVal?

---

• The callback can define (newArr) => { const [newA, newB] = newArr; ... } if you only need new values
• No approach to watch arrays of sources
• You cannot ignore oldVal in multi-source watchers
• Use watchers in main.js for concurrency watchers

(2/45) Which directive in Vue 3 is used to attach an event listener, and can be shortened with '@' syntax?

---

• v-on
• v-model
• v-if
• v-else

(3/45) How can you globally register a component in a Vue 3 app so that it can be used in all child components?

---

• app.component('MyGlobal', MyGlobalComponent) after createApp()
• Add it as a prop in the parent component
• Vue 3 removed global component registration
• Use the watchEffect function in main.js

(4/45) In Vue 3, how can you configure code splitting for certain routes in your app?

---

• Manual code splitting is not supported in Vue 3
• Use defineEmits for all route components
• Define each route's component with a dynamic import, e.g. component: () => import('...')
• Import watchers for each route

(5/45) Which approach do you use to globally register a directive that sets focus on an input in Vue 3 so that it’s available in all components?

---

• app.directive('focus', { mounted(el) { el.focus(); } }) after createApp(...)
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• No approach for global directives in Vue 3

(6/45) In Vue 3, which function can create a minimal store without plugins or libraries, simply by exporting a reactive object?

---

• onServerPrefetch() from 'vue'
• createStore() from vue-core
• reactive() from 'vue'
• watchEffect() from 'vue'

(7/45) What is the recommended approach to migrate a large Vue 2 project to Vue 3 without rewriting everything at once?

---

• It is impossible to migrate from Vue 2 to Vue 3
• Replace all watchers with watchers in main.js only
• Rewrite the entire project in Angular
• Use the Vue 3 Migration Build, which provides backwards compatibility warnings

(8/45) Which approach ensures watchers in a child do not trigger on mount if you want them to only respond to parent updates in Vue 3?

---

• Set immediate: false in the watch options (the default), so the watch callback does not run on creation
• No approach to skip mount triggers in watchers
• Use defineProps for concurrency watchers only
• Use watchers in main.js for concurrency watchers

(9/45) What is the recommended syntax to attach multiple classes conditionally in a Vue 3 template?

---

• v-bind:class="conditional ? 'a' : 'b'" with no support for multiple classes
• You cannot use multiple classes in Vue 3 conditionally
• :class="{ 'is-active': isActive, 'is-hidden': isHidden }" or arrays
• :class="fooClass + ' ' + barClass" only

(10/45) Which statement about watchers is correct if you define watch(() => user.info, callback) without deep in Vue 3?

---

• Use watchers in main.js for concurrency watchers only
• It tracks all nested fields automatically
• It triggers if user.info is replaced with a new object, ignoring changes to user.info’s nested properties
• No approach to watch object references in Vue 3

(11/45) Which Vue 3 feature can you use to create transitions or animations specifically when adding or removing items in a list?

---

• v-model transitions
• onServerPrefetch hooks
• <transition-group>
• v-for watchers only

(12/45) Why might you use shallowReactive() instead of reactive() in Vue 3?

---

• Because shallowReactive is the only way to track arrays in Vue 3
• To avoid deeply tracking nested objects for performance or design reasons
• Because reactive() no longer works in Vue 3
• To prevent watchers from triggering at all

(13/45) What should you do if you receive an error about 'multiple root nodes' in a Vue 3 Single File Component?

---

• Downgrade to Vue 2 to support multiple roots
• Root nodes are not permitted in Vue 3
• Use a <transition-group> for everything
• Wrap your template contents in a single root element or ensure your build tool is set to Vue 3 (which should allow multiple roots)

(14/45) Which Vue 3 lifecycle hook would you use to access a child component’s refs or DOM elements after everything in the sub-tree has rendered?

---

• onBeforeUnmount
• onUpdated only
• onRenderTracked
• onMounted

(15/45) Which statement accurately describes how a watchEffect callback runs in Vue 3?

---

• It runs immediately once, then re-runs whenever any reactive dependency used in the callback changes
• It never runs unless flush: 'sync' is used
• It only runs once on unmount
• It only tracks deep watchers by default

(16/45) Which statement about v-html usage in Vue 3 is correct?

---

• v-html is replaced by watchers in Vue 3
• v-html automatically sanitizes content, preventing XSS
• v-html renders raw HTML, which is potentially dangerous if the source is not trusted
• v-html only accepts JSON data

(17/45) Which directive in Vue 3 do you use if you want to generate elements from an array, with each element repeated in the DOM for each array item?

---

• v-for
• v-model
• v-on
• v-bind:each

(18/45) When using a dynamic route (e.g., /user/:id) in Vue Router, how do you access the route parameter 'id' in the Composition API?

---

• const route = useRoute(); then route.params.id
• Use const id = this.$route.params.id
• Access a global variable named $params
• Use the onParams hook

(19/45) Which Composition API hook in Vue 3 is specifically intended for usage with <keep-alive> to detect when a cached component is re-inserted into the DOM?

---

• onKeepAlive
• onActivated
• onServerPrefetch
• onMounted only

(20/45) Which Vue 3 feature uses <Suspense> to display a fallback while waiting for an async component or async setup data to load?

---

• Suspense boundary
• Keep-Alive
• Provide/Inject
• Teleport

(21/45) Which statement is TRUE about watchers for arrays in Vue 3 if you mutate the array with push or splice?

---

• It only triggers watchers if flush: 'sync' is used
• You must replace the entire array for watchers to trigger
• It triggers the watcher callback, because proxies track array method calls
• Arrays are not reactive in Vue 3

(22/45) When declaring props in the Options API, which type is used to indicate a prop that can be any data type?

---

• String
• Number
• Any
• Object

(23/45) How can you specify that a Vue 3 SFC’s styles are meant to be global rather than scoped to the component?

---

• Use <style module> instead
• Use <style scoped> for global styles
• You must define a global directive for styles
• Just omit the scoped attribute, making them global

(24/45) Which directive in Vue 3 is used to dynamically show or hide an element based on a boolean expression?

---

• v-for
• v-bind
• v-if
• v-on

(25/45) Which statement about <transition> in Vue 3 is TRUE?

---

• It must be combined with <teleport> to work
• It automatically animates style changes on every ref update
• It applies transition hooks or transition classes for enter/leave states when toggling an element via v-if/v-show
• It only works with dynamic components

(26/45) In Vue 3, which built-in hook is called right before a component is unmounted?

---

• onBeforeUnmount
• onMounted
• onUnmounted
• onUpdated

(27/45) When migrating from Vue 2 to Vue 3, which is an example of a removed feature that you must replace, typically by using watchers or computed?

---

• Emits array is removed
• Filters in templates have been removed from core; recommended to use methods or computed instead
• slot-scope usage in templates
• Props are no longer supported in Vue 3

(28/45) Which approach is recommended for animating a single element that changes state using Vue transitions?

---

• Transitions are not allowed for single elements
• Use inline JavaScript setTimeout in mounted()
• Animate only using watchers
• Wrap the element with <transition> and add enter/leave CSS classes

(29/45) Which statement about using multiple root elements in a Vue 3 SFC is correct?

---

• Multiple roots break watchers
• Vue 3 supports multiple root elements due to fragments, but certain build tools might need configuration
• You must wrap them in <transition-group> to avoid errors
• Vue 3 still enforces a single root node in .vue files

(30/45) In Vue 3, how do you define watchers in an Options API SFC if you want them in a named watch property referencing a nested object path, e.g. user.info.name?

---

• watch: { user: { ... } } only
• No approach to watch nested paths in the Options API
• watch: { 'user.info.name'(newVal, oldVal) { ... } } inside export default
• Use watchers in main.js for concurrency watchers

(31/45) When using Vue 3 transitions for a list, which wrapper do you typically use to handle inserting, removing, or moving items?

---

• <fragment>
• <teleport>
• <transition-group>
• <keep-alive>

(32/45) How do you ensure that a dynamic v-if condition and a dynamic v-for array do not conflict on the same element in Vue 3?

---

• Use <template v-if> wrapping the v-for element or filter the array before v-for, as putting v-if and v-for on the same element can cause issues
• You must define watchers for each condition
• Add v-if.sync to the array
• They can be combined on the same element with no problem

(33/45) Which statement about <keep-alive> in Vue 3 is accurate?

---

• No difference from <transition>
• It forces the component to always re-render from scratch
• It only works with Teleport
• It caches inactive component instances to preserve their state when toggled in or out

(34/45) Which function in Vue 3 do you call to create a new root instance for your application?

---

• createApp()
• Vue.config.globalInstance()
• Vue.defineApp()
• new Vue()

(35/45) How do you add multiple event listeners for different events on the same element in a Vue 3 template?

---

• Use defineEmits for each event in main.js
• Vue 3 does not allow multiple events on the same element
• Use multiple @ directives, e.g. @click="foo" @mouseover="bar"
• Use watchers for each event

(36/45) How do you apply a transition only when an element is inserted or removed via v-if in Vue 3, and not when v-show changes its display property?

---

• Use <transition> with v-if, because v-show does not trigger enter/leave transitions for the element
• Add watchEffect for toggling classes
• v-show triggers the same transitions by default
• Apply a special directive v-transition-if

(37/45) Which feature of Vue 3 helps organize and encapsulate reusable logic (e.g., fetching data or toggling state) across multiple components?

---

• Composables (reusable composition functions)
• Transition wrappers
• Filters
• Scoped styles

(38/45) Which lifecycle hook in Vue 3 triggers right after a component’s DOM has been fully inserted, making it safe to access child elements?

---

• onBeforeMount
• onDeactivated
• onBeforeUpdate
• onMounted

(39/45) How do you create a typed ref in Vue 3 with TypeScript for a variable that starts as null but will later store an HTML element?

---

• Vue 3 does not support typed DOM refs
• const el = ref<HTMLElement | null>(null)
• const el = markRaw(null)
• const el = reactive<HTMLElement>(document.body)

(40/45) What does the function shallowRef() do in the Vue 3 Composition API?

---

• Tracks changes in nested properties deeply
• Creates a regular JavaScript object without reactivity
• Creates a ref that only tracks its own .value changes, but not nested objects
• Removes the need to return values from setup()

(41/45) How do you properly declare a watch for a reactive object user so you only see changes in user.name in Vue 3, ignoring other fields?

---

• watch(() => user.name, (newVal, oldVal) => { ... })
• Use watchers in defineExpose
• Use deep: true watchers for everything in user
• Impossible to isolate a single property watch

(42/45) Which Vue 3 concept allows you to define a logic block once and then reuse it in multiple components for handling similar tasks?

---

• Mixins only
• Server hooks
• Composables (custom composition functions)
• Global watchers

(43/45) Which statement about reactivity with arrays in Vue 3 is correct?

---

• You must replace the entire array to track changes
• You must call Vue.set for array reactivity
• Arrays are not reactive in Vue 3
• Direct array methods like push, splice are tracked via Proxy, so watchers do trigger

(44/45) Which directive would you use if you want to conditionally apply a dynamic ID attribute from a prop in Vue 3, e.g. <div v-bind:id="someProp" />?

---

• v-on
• v-bind
• v-text
• v-if

(45/45) When you import something like 'import { onMounted, ref } from "vue"', why can the bundler safely tree-shake unused exports in Vue 3?

---

• Bundlers only remove watchers, not hooks
• All of them are required, so there is no tree-shaking
• Because Vue 3 uses ES modules, and unused imports can be dropped by modern bundlers
• Vue 3 does not allow named imports anymore

Submit