Script setup syntax in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <script setup> syntax in Vue 3?

It is a simpler and more concise way to write the component's script logic using the Composition API without the need to explicitly return values or define a setup() function.

beginner

How do you declare reactive state variables inside <script setup>?

You use the ref() or reactive() functions imported from Vue to create reactive state variables directly inside the <script setup> block.

intermediate

Can you use props directly inside <script setup> without defining them explicitly?

No, you must define props using the defineProps() helper function to declare the expected props and their types inside <script setup>.

intermediate

How do you emit events from a component using <script setup>?

You use the defineEmits() helper function to declare the events your component can emit, then call the returned emit function to send events.

beginner

What is one advantage of using <script setup> over the traditional setup() function?

It reduces boilerplate code by removing the need to return variables and functions explicitly, making the component code cleaner and easier to read.

Which function is used to declare props inside <script setup>?

A useProps()

B props()

C defineProps()

D declareProps()

The defineProps() function is the official way to declare props in <script setup>.

How do you create a reactive variable inside <script setup>?

A Using reactiveState()

B Using reactiveVar()

C Using useState()

D Using ref() or reactive()

Vue provides ref() and reactive() to create reactive variables.

What must you do to emit an event from a component using <script setup>?

A Events cannot be emitted in <code>&lt;script setup&gt;</code>

B Use defineEmits() and call the emit function

C Use emitEvent() helper

D Call emit() directly without declaration

You declare events with defineEmits() and then call the returned emit function.

Which of these is NOT a benefit of <script setup>?

A Supports class-based components

B Automatic return of variables

C Less boilerplate code

D Simpler syntax for Composition API

Vue 3 Composition API and <script setup> do not support class-based components.

Where do you write the <script setup> block in a Vue component?

A Inside the <code>&lt;script&gt;</code> tag with the setup attribute

B Inside the <code>&lt;template&gt;</code> tag

C Inside the <code>&lt;style&gt;</code> tag

D Inside a separate JavaScript file only

You write <script setup> as a <script> tag with the setup attribute.

Explain how to define props and emit events using <script setup> in Vue 3.

Think about how you tell Vue what props and events your component uses.

Describe the main advantages of using <script setup> compared to the traditional setup function.

Focus on how it makes writing components easier and cleaner.