Vue JS Foundation of Vue Js 3 — Questions and Answers
Question 1: Which lifecycle hook runs after a component is first rendered to the DOM in Vue 3 Composition API?
- onBeforeMount
- onMounted (Correct answer)
- onUpdated
- onUnmounted
Correct answer: onMounted
onMounted fires after the component has been inserted into the DOM.
Question 2: What does the computed() function return?
- A plain function
- A reactive value that updates when its dependencies change (Correct answer)
- An event emitter
- A promise
Correct answer: A reactive value that updates when its dependencies change
computed() returns a cached reactive reference that recalculates only when a dependency changes.
Question 3: How does a child component send data up to its parent in Vue?
- By mutating the prop directly
- By emitting a custom event (Correct answer)
- By using v-model on data
- By importing the parent
Correct answer: By emitting a custom event
A child emits a custom event (via emit) that the parent listens to with v-on.
Question 4: What is the correct way to pass static text into a child component prop?
- :message="hello"
- message="hello" (Correct answer)
- @message="hello"
- v-model:message="hello"
Correct answer: message="hello"
Without the colon, the attribute passes a literal static string to the prop.
Question 5: Which option declares the data a component accepts from its parent in the Options API?
- data
- props (Correct answer)
- emits
- methods
Correct answer: props
The props option lists the inputs a component receives from its parent.
Question 6: What does the reactive() function expect as its argument?
- A primitive string
- An object or array (Correct answer)
- A number
- A boolean
Correct answer: An object or array
reactive() is designed for objects and arrays, returning a deeply reactive proxy.
Question 7: In a single-file component, which block contains the component's markup?
- <script>
- <template> (Correct answer)
- <style>
- <setup>
Correct answer: <template>
The <template> block holds the component's HTML-based markup.
Vue JS Foundation of Vue Js 3
Which lifecycle hook runs after a component is first rendered to the DOM in Vue 3 Composition API?