(1/15) What is the recommended way to pass data from a parent component to a child component in Vue 3?

---

• Using watchEffect
• Using global variables
• Using props
• Using a custom directive

(2/15) Which directive might you use if you want to attach a dynamic event name stored in a variable called eventName to an element in Vue 3?

---

• v-model:[eventName]
• v-on:[eventName]
• v-if:[eventName]
• v-bind:eventName

(3/15) Which approach in Vue 3 is recommended for conditionally applying multiple classes to the same element based on different boolean conditions?

---

• Use :class="{ classA: condA, classB: condB }" or an array syntax
• Use v-if for each class
• Impossible to conditionally apply multiple classes
• Use watchers for each class

(4/15) Which directive is used to render a list based on an array in Vue 3?

---

• v-for
• v-model
• v-on
• v-if

(5/15) When using <transition> for a single element or <transition-group> for a list in Vue 3, what do you typically rely on for the animations?

---

• A built-in library that automatically handles physics-based transitions
• Inline watchers that manually animate each property
• You cannot animate element transitions in Vue 3
• CSS transition or animation classes, or JavaScript hooks if more control is needed

(6/15) Which configuration in Vite-based Vue 3 projects typically stores environment variables like VITE_API_URL?

---

• A .config.json file
• They must be declared in main.js
• A .env file (e.g., .env, .env.production), accessed via import.meta.env
• Vite does not support environment variables

(7/15) Which lifecycle hook in Vue 3 is an ideal place to remove event listeners or cancel API calls before the component is destroyed?

---

• onMounted
• onBeforeUnmount
• onBeforeUpdate
• onUnmounted

(8/15) In Vue 3, when using script setup, where should you place import statements for components used in your template?

---

• They must be declared in an external .js file
• Anywhere inside the setup() function
• At the top of the script setup block (top-level imports)
• In the <template> block itself

(9/15) Which directive would you use to attach an event listener in a Vue template?

---

• v-bind
• v-on
• v-model
• v-if

(10/15) Which combination correctly sets up a custom v-model binding in a Vue 3 child component?

---

• Prop named customValue and event customChange
• Provide/Inject pair for model data
• Prop named modelValue and event update:modelValue
• Use watchers to track the parent's data changes in the child

(11/15) What is the recommended syntax in Vue 3 for listening to a custom event named 'toggle' on a child component in a parent’s template?

---

• Use a custom directive v-toggle-event
• v-model:toggle="onToggle"
• @toggle="onToggle" or v-on:toggle="onToggle"
• v-if="toggle" with watchers

(12/15) Which directive might you use to assign a function that triggers on a blur event in a Vue 3 template?

---

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

(13/15) How do you designate a component as globally available in a Vue 3 app so you don’t need to import it in every child that uses it?

---

• Declare watchers in main.js
• Use provide/inject for the component definition
• It’s not possible; everything must be locally registered
• app.component('MyComp', MyComp) before app.mount()

(14/15) Which statement about <keep-alive> in Vue 3 is correct?

---

• No difference from <transition>
• It re-renders the component from scratch every toggle
• It must be combined with watchers for reactivity
• It caches inactive component instances to preserve their state, typically used with dynamic components or router-view

(15/15) In Vue 3, what are the default prop/event names for v-model if you don't customize them in a child component?

---

• Prop: 'modelValue', Event: 'update:modelValue'
• Props are not used for v-model in Vue 3
• Prop: 'data', Event: 'emitData'
• Prop: 'value', Event: 'input'

Submit