(1/40) Which approach is recommended to handle frequently changing data in Vue 3 for performance optimization?

---

• Force a re-render on every change using nextTick
• Use shallowReactive or shallowRef if deep reactivity is not needed
• Disable reactivity for that data altogether
• Store it in data() of a component using the Options API only

(2/40) What is the recommended pattern for adding animations when navigating between routes in Vue 3?

---

• You must create a custom directive for route animations
• Vue 3 no longer supports route transitions
• Use watchers for route changes to manually manipulate CSS classes
• Wrap <router-view> in <transition> or <transition-group> and apply transition classes for enter/leave

(3/40) If you want the user to see an alert only when they navigate away from a specific route, how might you implement that in Vue 3?

---

• Use watchEffect in the child component to detect route changes
• Implement a 'beforeRouteLeave' navigation guard in a component or a global beforeEach guard in the router
• Vue 3 does not allow route leave hooks
• Use a global directive that triggers on route leave

(4/40) How can you detect if a prop has changed in a child component using the Composition API in Vue 3?

---

• Use provide/inject for the prop
• Props cannot be watched in Composition API
• Use watch on the specific prop: watch(() => props.someProp, (newVal, oldVal) => ...)
• Props changes are not detectable in children

(5/40) Which of the following is a correct usage of the watchEffect() function?

---

• watchEffect(() => { console.log(someReactiveVar); })
• watchEffect() is identical to computed properties
• watchEffect() cannot accept arrow functions
• watchEffect(someReactiveVar => { })

(6/40) Which approach is recommended if you want typed usage of route navigation in Vue 3 with TS, e.g., ensuring router.push() only accepts valid route objects?

---

• Import types from 'vue-router', e.g. RouteLocationRaw, to ensure push(...) is typed. The runtime won't enforce, but TS can catch mistakes at compile time
• Use watchers in main.js for concurrency watchers only
• Use defineExpose for concurrency watchers
• No approach for typed route usage in Vue 3

(7/40) How do you define watchers for a v-model that includes multiple different props in a single child component in Vue 3?

---

• Use watchers in main.js for concurrency watchers only
• Impossible to define multiple v-model watchers
• Define watchers for each v-model prop. If you have v-model:foo and v-model:bar, that means props foo, bar and events update:foo, update:bar. Watch each as needed in the child
• Use defineProps for concurrency watchers

(8/40) How do you define watchers in a composable function if you want typed usage for a numeric property being watched, in a Vue 3 + TS environment?

---

• Use defineExpose for concurrency watchers
• Import { watch } from 'vue'. If the property is ref<number>, watch<number>(property, (newVal, oldVal) => { ... }) or rely on inference if property is typed
• Use watchers in main.js for concurrency watchers only
• Composables cannot define watchers in TS

(9/40) How do you disable attribute inheritance (where non-prop attributes are automatically passed to the root element) in a Vue 3 component using the Options API?

---

• Props override all unknown attributes
• Use v-if on every attribute
• inheritAttrs: false in export default {}
• Vue 3 does not allow disabling inheritance

(10/40) When dealing with a large form, how can you minimize re-renders in Vue 3?

---

• Use separate components for sections of the form, each with its own state or shallow reactivity if deep reactivity is not needed
• This is not possible in Vue 3
• Disable reactivity for all form inputs
• Use watchers on every input to forcibly re-render each time

(11/40) Which statement about transition modes (e.g., 'out-in' or 'in-out') in Vue 3 is correct?

---

• They handle watchers for array changes
• They define the order in which the entering and leaving transitions occur when switching elements or components
• Transition modes are deprecated in Vue 3
• They only apply to keep-alive components

(12/40) How do you pass a CSS class from a parent to child’s root element without using a specific prop for it in Vue 3?

---

• This is impossible; you must define a prop for class
• Use watchEffect on $attrs.class
• Set inheritAttrs: true (the default) so class attributes flow to the root element, if the child does not override them
• Use an event bus to pass classes down

(13/40) Which Vue 3 lifecycle hook can you use in a <script setup> block to run code only once when the component is activated by keep-alive?

---

• There is no keep-alive hook in Vue 3
• onActivated
• onDeactivated
• onMounted

(14/40) Which statement about watchers is correct if you do watch(computedValue, callback) in Vue 3, ignoring all other sources?

---

• Use defineProps for concurrency watchers
• Impossible to watch a computed
• It triggers if computedValue changes (due to underlying dependencies). oldVal/newVal are provided if you define them in the callback signature
• No approach to define watchers for concurrency watchers

(15/40) What is a typical advantage of using Composition API's provide/inject over prop drilling?

---

• It disables reactivity on the injected data
• provide/inject data is automatically saved to localStorage
• It allows passing data deeply through nested components without manually defining props at each level
• It can only be used in router hooks

(16/40) Which statement accurately describes Teleport’s behavior regarding the parent-child relationship in Vue 3?

---

• The teleported content is no longer a child of the original component
• It automatically registers a new root Vue instance wherever it teleports
• Logic and reactivity remain, but the rendered DOM is placed elsewhere, so the component is still a child logically
• Teleport does not handle reactivity

(17/40) In Vue 3's Composition API, which approach is recommended to avoid repeating the same logic in multiple watchers or lifecycle hooks across different components?

---

• Repeat the code in each component for clarity
• Create a reusable composable (composition function) that encapsulates that logic
• Use mixins exclusively
• Use global watchers in main.js for all data

(18/40) Which statement about global mixins in Vue 3 is correct?

---

• Mixins were removed entirely in Vue 3
• Global mixins never affect child components
• Global mixins must only be declared in each .vue file individually
• Global mixins can be added using app.mixin()

(19/40) How can you create a watcher in Vue 3 that listens to an array of reactive sources and only fires when all have changed?

---

• Use watch() with an options object specifying 'all: true'
• You must create multiple watch calls, one per source
• Use watchPostEffect() with a deep option
• Pass multiple sources in an array to watch, e.g. watch([refA, refB], callback)

(20/40) In Vue 3, how do you pass an event handler from a parent to a child via props, so the child can call it when needed?

---

• Use a global event bus only
• Define a prop with type Function, then call it inside the child component
• Use $emit to bubble up the event
• Declare it with watchEffect in the child

(21/40) When would you prefer defineAsyncComponent over route-based dynamic imports in Vue 3?

---

• They are identical in usage with no differences
• Vue 3 does not allow defineAsyncComponent
• If you want to lazy-load a component used in the template but not necessarily linked to a route
• If you only want lazy loading in router transitions

(22/40) How do you define watchers for route query parameters, such as ?page=2, in a Vue 3 setup() function using Composition API?

---

• Write a global directive for each query param
• Use watch(() => route.query.page, (newVal) => { ... }) after const route = useRoute()
• No approach to watch query parameters in Vue 3
• Rely on watchers in main.js only

(23/40) How can you define a custom directive locally inside a Vue 3 component using the Options API?

---

• Use myDirective() inside setup
• v-myDirective is automatically recognized in any component
• Define it in main.js only
• directives: { myDirective: definition } inside the component export

(24/40) Which Vue 3 feature allows you to organize reusable logic across multiple components?

---

• Filters
• Composition functions (a.k.a. composables)
• Mixins
• Directives

(25/40) Which statement best explains what defineProps() does in <script setup> with TypeScript?

---

• It no longer exists in Vue 3
• It is used only for SSR hydration
• It merges watchers for each prop
• It declares typed props for the component, automatically validating them at runtime

(26/40) Which approach might you consider if you want a child to handle concurrency watchers for changes in a prop that references an array of items loaded from the parent in Vue 3?

---

• Impossible to watch arrays in a child
• Use defineProps for concurrency watchers
• Inside the child, watch(() => props.items, (newVal, oldVal, onInvalidate) => { ... concurrency logic ... }) if needed. Or watch(() => newVal.length) if you only track length changes. For item-level changes, you might need deep: true or separate logic
• Use watchers in main.js for concurrency watchers only

(27/40) Which approach is recommended if you want to define watchers for concurrency in a complex, multi-field search form in Vue 3 that triggers a delayed request?

---

• Debounce or throttle the watch callback, or handle onInvalidate to cancel the old request if a new input arrives quickly
• Impossible to handle concurrency in watchers
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers

(28/40) In Vue 3, how do you attach multiple watchers for the same reactive variable from within the same component?

---

• Define multiple watch(...) calls referencing the same variable or property, each with its own callback
• Set deep: true on watchers to combine them
• You cannot watch the same variable multiple times
• Use watchers array in main.js

(29/40) When using the Composition API in Vue 3, how do you ensure a certain piece of data remains reactive if you destructure props?

---

• Use watchPostEffect to restore reactivity
• It’s impossible to keep reactivity after destructuring
• Just destructure: const { title } = props, it's always reactive
• Use toRefs on the props object, e.g., const { title } = toRefs(props)

(30/40) How can you define a lazy-loaded child route in Vue Router for a nested path, for example /parent/child, in Vue 3?

---

• Use the meta: { lazy: true } property
• Use an array of watchers for the child route
• Dynamic imports are forbidden in child routes
• Use a nested route config with component: () => import('...Child.vue') in the children array

(31/40) In Vue 3, what is the recommended way to handle asynchronous operations within the Composition API?

---

• Always use watchers for async logic
• Use .then() only without async/await
• Async is not allowed inside setup
• Use async/await directly in setup() or in composition functions

(32/40) Which statement correctly explains how to handle an input field two-way binding in Vue 3 using the Composition API in a child component?

---

• Use provide/inject to pass input events up and down
• In Vue 3, you must define a watch on the child and manually sync the parent's data
• Declare a prop 'modelValue' and emit 'update:modelValue' events from the child, then parent uses <Child v-model="someData" />
• Use v-model without props or emits, it automatically works

(33/40) Which statement about watchers for route.params in Vue 3 is correct?

---

• You must use defineExpose for route changes
• When route.params changes, watchers that reference route.params or a portion of it will trigger
• They only trigger once on mount
• It merges watchers in main.js automatically

(34/40) When you define a Pinia store in Vue 3, how do you access it inside a component that uses the Composition API?

---

• You cannot use Pinia with the Composition API
• Use import { myStore } from './store.js' directly without anything else
• Call const store = useMyStore() within setup() after createPinia() is installed
• Use the old this.$store property from Vue 2

(35/40) What does 'lazy loading' of routes in Vue Router typically involve?

---

• Loading all routes in the main chunk by default
• Using watch() to load routes on demand
• Preloading all components at once
• Using dynamic imports for route components so they’re loaded only when needed

(36/40) Which Vue Router feature allows you to name different sections of a page for multiple router views?

---

• Multi-route injection
• Route Mixins
• Route watchers
• Named Views

(37/40) If you want to define a nested route in Vue Router 4 for Vue 3, how do you typically specify child routes in the route config?

---

• In watchers for route changes
• Use a custom directive v-child-route
• Vue 3 does not allow nested routes
• Use an array of child route objects under a children: [] property in the parent route definition

(38/40) How do watchers in Vue 3 handle concurrency if you define watchEffect(() => { ... async code ... }) instead of watch(...) with oldVal/newVal?

---

• Impossible to handle concurrency in watchEffect
• watchEffect doesn't provide oldVal/newVal, but it provides onInvalidate for concurrency cleanup. You must handle logic differently
• Use watchers in main.js for concurrency watchers only
• No approach for concurrency watchers in script setup

(39/40) How do watchers in a child respond if the parent's v-model changes from 'foo' to 'bar' multiple times in quick succession in Vue 3, referencing concurrency logic?

---

• Impossible to watch modelValue changes in the child
• The child sees each prop update, can define onInvalidate in watch(() => props.modelValue, async callback)
• Use watchers in main.js for concurrency watchers only
• No approach for concurrency watchers in a child

(40/40) Which statement best describes how to use defineExpose in a <script setup> block?

---

• It’s used to expose methods or properties to the parent if the parent obtains a ref to this component
• It is for exposing watchers to the global scope
• It automatically re-renders the component on each call
• It merges watchers and computed properties automatically

Submit