(1/12) How do you manage route transitions when navigating from one route to another, applying transitions only to <router-view> in Vue 3?

---

• Define watchers in defineProps to track route changes
• Wrap the <router-view> in <transition> or <transition name="..."> with CSS classes for enter/leave
• No approach for route transitions in Vue 3
• Use watchers for each route property

(2/12) Which approach might you use if you want to watch multiple computed properties in one callback in Vue 3, referencing a user’s name and age changes together?

---

• Use watchers in main.js for concurrency watchers
• Impossible to watch multiple computed props
• Combine them in an array or a single computed that returns an object, then watch(() => [nameComputed.value, ageComputed.value], ([newName, newAge], [oldName, oldAge]) => { ... })
• Use defineExpose for concurrency watchers

(3/12) How do you apply transitions when using dynamic components with <component :is="currentView" /> in Vue 3?

---

• Use defineProps for concurrency watchers
• Wrap <component> in <transition> or <transition :name="..." key on the component, so each change triggers enter/leave transitions
• Use watchers for concurrency only
• Impossible to animate dynamic components

(4/12) Which statement about watch arrays in Vue 3 is accurate?

---

• If you use push/splice on a reactive array, it still triggers watchers for that array reference in Vue 3
• Watching an array triggers the callback only if the array reference changes, not when its elements change
• You must always create a new array to trigger watchers
• Arrays cannot be watched in Vue 3

(5/12) Which statement about watchers with the 'deep' option is correct in Vue 3?

---

• deep watchers can only track changes in primitive data
• deep watchers are no longer supported in Vue 3
• deep watchers track changes in nested objects/arrays
• deep: true is the default

(6/12) Which statement about watchers in Vue 3 is correct when you watch an array but push new items into it?

---

• You must set deep: true for array watchers in all cases
• The watcher callback triggers on push/splice because Vue 3 uses proxy-based reactivity for arrays
• Arrays are not reactive in Vue 3
• push does not trigger watchers, only direct reassignments do

(7/12) Why might you prefer using defineAsyncComponent for a large child component rather than importing it synchronously in a Vue 3 application?

---

• To code-split and lazy-load that component only when it’s actually rendered, reducing initial bundle size
• No difference in performance
• To skip watchers entirely
• Because Vue 3 forbids synchronous imports

(8/12) What is a typical reason to prefer watchEffect over watch in Vue 3?

---

• You need the oldVal/newVal for comparisons
• You want to automatically track all dependencies used in the effect callback without listing them manually
• watchEffect triggers watchers in main.js only
• You only want to watch one property at a time

(9/12) What is the difference between the Options API data() function and the Composition API ref()?

---

• data() returns references to the DOM; ref() can’t hold any data
• data() is for array data, ref() is for object data
• They have no functional difference in Vue 3
• data() returns a plain object for component state; ref() creates a reactive reference that can be used anywhere

(10/12) What is the main benefit of using dynamic components in Vue 3 via <component :is="...">?

---

• It disables reactivity for performance gains
• It merges child and parent data properties
• It automatically creates watchers for each prop
• It allows switching between different components at runtime while retaining state if keyed properly

(11/12) Which approach is recommended in Vue 3 for code reuse if you have multiple components that each need to fetch from the same API and share the same logic?

---

• Use watchers with defineExpose
• Use a composable function (e.g. useFetchAPI) returning reactive data and methods, import it in each component
• Use watchers for each fetch call in main.js
• Create a global directive that triggers API calls

(12/12) What does the 'mode' prop on <transition> (like 'in-out' or 'out-in') do in Vue 3?

---

• It’s deprecated in Vue 3 and no longer used
• Specifies the order of entering and leaving transitions when toggling components
• Removes the need for watchers on transitions
• Determines whether transitions occur for v-if or for v-show only

Submit