(1/12) In Vue 3, what is the use case for the 'shallowReadonly()' function?

---

• To set a global read-only property for the entire app
• To create a deeply reactive object
• To create a reactive object whose root-level properties are read-only, but nested objects remain mutable
• To watch multiple refs at once

(2/12) If you want a single route to use defineAsyncComponent for code splitting AND a local watch for concurrency logic in that route’s component, how do you ensure the watch is not declared until the chunk is loaded in Vue 3?

---

• Impossible to watch local data after chunk load
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• The watch is inside the async component code. The user only sees that logic once the component chunk is imported. So it’s automatically not declared until the chunk arrives and the component is instantiated

(3/12) How might you optimize a large table in Vue 3 so that only a subset of rows are rendered at a time for performance reasons?

---

• Use watchEffect to manage each row’s watchers
• Use v-if on each row to hide them instead of removing them from the DOM
• Implement virtual scrolling or pagination to reduce visible rows
• Wrap the table in <transition-group>

(4/12) When might you use the unref() function in Vue 3’s Composition API utilities?

---

• To retrieve the raw value from a ref if it might also be a plain value, i.e. unref(possibleRefOrVal)
• It is used for unsubscribing from watchers only
• If you want to forcibly remove watchers from an object
• It merges watchers and computed properties

(5/12) In Vue 3, which lifecycle hook is analogous to the old beforeCreate hook from Vue 2?

---

• onActivated
• There is no direct equivalent, since setup() runs before the component is fully created
• onBeforeUpdate
• onBeforeMount

(6/12) Which advanced feature allows partial rewriting of the template AST in Vue 3 to handle custom syntax or experimental directives, hooking into the compiler pipeline?

---

• No approach for partial rewriting
• Use watchers in concurrency watchers mode only
• Custom compiler transforms added to @vue/compiler-core, injecting transformXXX calls for your directive or syntax. This is typically for library authors or advanced plugin devs
• Use defineProps for concurrency watchers

(7/12) What is the main advantage of watchers returning an 'invalidate' callback in Vue 3’s Composition API?

---

• To define custom directives within watchers
• It provides type inference for watchers
• It allows watchers to track multiple refs without arrays
• To register a callback that runs when the watcher is about to re-run or is stopped, useful for canceling async requests

(8/12) How do you reference a child component’s public methods if the child is written with <script setup> in Vue 3?

---

• Use a global directive for method forwarding
• Impossible to call child methods in <script setup>
• Define the methods in defineExpose({ myMethod }) so the parent can call them via template ref
• Use watchers for all method calls

(9/12) Which concurrency watchers scenario might require you to store a chain of onInvalidate callbacks if an async operation triggers secondary async tasks, forming a pipeline in Vue 3?

---

• You might have watchers that call an async function, which then triggers another reactive change leading to a second watch callback. If both can be invalidated by a new change, you track each step’s onInvalidate token to properly abort the entire pipeline if data changes again. Very advanced usage
• Use defineProps for concurrency watchers
• Use watchers in main.js for concurrency watchers only
• Impossible to chain watchers in pipelines

(10/12) What is a key advantage of using watchEffect() over watch() in Vue 3?

---

• They are identical in every way
• watch() is faster than watchEffect()
• watchEffect() can only watch one property
• watchEffect() automatically tracks all reactive references without declaring them

(11/12) How do you define watchers for concurrency that skip immediate triggers for the first N changes in Vue 3, e.g. ignoring the first 3 changes then handling concurrency only afterward?

---

• Use watchers in main.js for concurrency watchers only
• Use defineProps for concurrency watchers
• Implement a local counter in the watch callback. If (counter < 3) increment and return. Only after 3 changes do you proceed with concurrency logic. This is purely manual, advanced usage
• No approach to skip N triggers in watchers

(12/12) What is the default flush timing of watch() in Vue 3?

---

• flush: 'sync'
• It cycles through all three flush modes automatically
• flush: 'pre'
• flush: 'post'

Submit