(1/12) Which is a typical advantage of using shallowRef for a large array in Vue 3?

---

• It caches watchers for each element
• You get deep reactivity for every array element
• It automatically sorts the array for performance
• You only trigger reactivity when the array reference changes, not on each push/splice in the array

(2/12) How do watchers for concurrency behave if you define watch(() => props.userId, (newVal, oldVal, onInvalidate) => { ... }) in a child, and the parent changes userId multiple times in a row in Vue 3?

---

• Each time props.userId changes, the watch callback runs. You can call onInvalidate in the async logic to cancel prior tasks if a new change arrives quickly
• Use watchers in main.js for concurrency watchers
• No concurrency approach for props changes
• Use defineExpose for concurrency watchers

(3/12) Which statement best describes how watchers in a composable can reference a param from defineProps in the host component’s setup?

---

• Props are not accessible in composables
• You can pass the prop or a ref derived from it into the composable, so watchers inside the composable track that ref or reactive property
• Use defineEmits for concurrency
• You must define watchers globally in main.js

(4/12) Which approach might you use if you have a large object from an external library that you need to store in Vue’s reactive state in Vue 3, but you only care about certain top-level property changes?

---

• Wrap it with shallowReactive so that nested changes are ignored, or use toRef on the specific top-level properties you care about
• Use defineExpose for concurrency watchers
• No approach to partially track an object
• Use watchers in main.js for concurrency watchers only

(5/12) When you have a large component that handles multiple logical concerns, how might you refactor it in Vue 3 for better reusability?

---

• Keep it as is, because splitting is discouraged
• Use defineExpose for each piece of data
• Use watchers to separate logic
• Extract distinct pieces of logic into composable functions (e.g., useSomeFeature) that can be reused across components

(6/12) In Vue 3, how might you set up a global mixin that injects a common method into all components?

---

• Global mixins are no longer supported in Vue 3
• app.mixin({ methods: { ... } })
• app.globalMethod(...) in watchers
• Define watchers for every component property

(7/12) When migrating a Vue 2 project to Vue 3, which official tool or feature can help detect deprecated APIs at runtime?

---

• Vue DevTools 4.0 only
• No official tooling is provided
• You must manually read console logs for all components
• The Vue 3 Migration Build

(8/12) How do you use the <script> block with 'lang="ts"' in Vue 3 to get TypeScript support in Single File Components (SFCs)?

---

• You must separately compile .ts files into .js manually
• Use <script lang="typescript" setup>, as standard ‘lang="ts"’ with build tooling (like Vite or Vue CLI) will handle compilation
• Vue 3 does not support TypeScript in SFCs
• Replace the template with a .tsx file only

(9/12) If you have watchers referencing multiple route query params in Vue 3, how do you track only certain param changes and ignore others?

---

• No approach to partial param watchers
• Use defineExpose for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Watch specific param references, e.g. watch(() => route.query.someParam, (newVal, oldVal) => ...) ignoring the rest

(10/12) Which lifecycle hook in the Composition API is specifically called before reactive data triggers a re-render of the component?

---

• onBeforeUpdate
• watchEffect()
• onBeforeMount
• onRender

(11/12) How do watchers in Vue 3 handle concurrency if you define watchEffect for an async function that depends on a local ref, and the user changes that ref repeatedly?

---

• No concurrency approach in watchEffect
• Inside watchEffect, you can define onInvalidate(( ) => cancelRequest()). Each time the local ref changes, watchEffect re-runs and calls onInvalidate for the old run, letting you cancel it
• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers

(12/12) Which approach is correct for changing the base URL of Vue Router when using createWebHistory in Vue 3?

---

• No way to change the base path in Vue Router 4
• Use hash mode to dynamically set the base
• Set process.env.BASE_URL in watchers
• Use base: '/some-base/' in createRouter's history option

Submit