(1/15) Which new feature in Vue 3 makes it simpler to define local state and logic outside of the Options API, aiding code organization?

---

• Composition API
• Transition Hooks
• Filters
• Scoped Slots

(2/15) Which directive can you use to dynamically bind all attributes of an object to an element in Vue 3, e.g. <div v-bind="attrsObj" />?

---

• v-bind (shorthand :) with an object, which merges all top-level keys as attributes/props
• v-model
• v-on
• v-if

(3/15) Which Vue 3 lifecycle hook can you use to coordinate a transition right before the component is about to re-render due to reactive data changes?

---

• onUpdated
• onBeforeUnmount
• onBeforeUpdate
• onServerPrefetch

(4/15) What would happen if you attempt to mutate the props object directly inside a child component in Vue 3 (Options API)?

---

• It throws a warning, as props should not be mutated in a child
• The entire component tree re-renders forcibly
• It merges the mutation with the child’s data object
• It quietly updates the parent state automatically

(5/15) Which Vue 3 feature addresses the 'props drilling' problem when you only need data in a deeply nested child and not in intermediate components?

---

• Global watchers in main.js
• provide/inject in the Composition API
• Teleport
• v-if directive in each child

(6/15) Which directive in Vue 3 would you use to capture keyboard events in your template?

---

• v-data
• v-keydown
• v-model
• v-on

(7/15) Which directive do you use if you want a child component’s 'modelValue' to bind to a parent's data property in Vue 3 for two-way binding, e.g. <Child v-model="parentProp" />?

---

• v-bind:modelValue
• v-if
• v-model
• v-on

(8/15) Which directive might you use if you only want to attach an event listener to the blur event on an input in Vue 3?

---

• v-model:blur
• v-blur
• v-if:blur
• v-on:blur or the shorthand @blur

(9/15) What is one main difference between <transition> and <transition-group> in Vue 3?

---

• They have no functional difference; just syntax differs
• <transition-group> only works with Teleport
• transition-group is for global watchers
• <transition> is for single-element/component transitions, <transition-group> is for list transitions with multiple elements keyed by v-for

(10/15) Which directive in Vue 3 allows you to bind inline styles dynamically?

---

• v-if
• v-on
• v-html
• v-bind:style

(11/15) Which directive in Vue 3 can help you handle the 'submit' event on a form without manually specifying @submit?

---

• v-model:submit
• v-on:submit.prevent
• v-bind:submit.block
• v-if:submit

(12/15) If you want to define multiple root nodes in a Vue 3 SFC template, what must you ensure?

---

• Simply place them as siblings; Vue 3 supports Fragments out of the box
• Add watchers for each node to track them
• Wrap them in <template v-if>
• Vue 3 does not allow multiple root nodes

(13/15) Which statement about the Vue 3 Composition API is FALSE?

---

• It uses ref() and reactive() for declaring reactive state
• It allows developers to better organize and reuse logic
• It provides hooks like onMounted, onBeforeMount, and so on
• It replaces the Options API entirely and makes it obsolete

(14/15) How do you define props for a component using the <script setup> syntax in Vue 3?

---

• Use watchers to track prop changes
• Use defineProps() at the top level in <script setup>
• Props must be declared in main.js
• Use export default {} at the bottom of the file

(15/15) Which statement about watchers is accurate if you do watchEffect(() => { console.log('user:', user.name) }) in Vue 3, referencing a nested property?

---

• It runs whenever user.name changes, since the effect references user.name
• It only runs if user is replaced entirely
• No approach to watch nested properties in watchEffect
• Use watchers in main.js for concurrency watchers only

Submit