Functional components in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a functional component in Vue?

A functional component is a simple Vue component that is stateless and instanceless. It is just a function that returns virtual DOM nodes and does not have its own reactive data or lifecycle hooks.

intermediate

How do you define a functional component in Vue 3?

You define a functional component by creating a function that returns the render output using JSX or the h() function.

beginner

Why might you choose a functional component over a regular component?

Functional components are faster because they do not have reactive state or lifecycle overhead. They are useful for simple UI pieces that only depend on props and do not need internal state or side effects.

beginner

Can functional components in Vue have reactive state or lifecycle hooks?

No, functional components do not have reactive state or lifecycle hooks. They are purely presentational and rely only on props to render their output.

beginner

How do you pass props to a functional component in Vue?

You pass props to a functional component the same way as regular components. The props are received as the first argument in the functional component function.

What is a key characteristic of a Vue functional component?

A It has no reactive state or lifecycle hooks

B It must use class-based syntax

C It always manages its own state

D It cannot receive props

Functional components are stateless and instanceless, so they do not have reactive state or lifecycle hooks.

How do you define a functional component in Vue 3?

A Export a function that returns the render output

B Use the 'data' option to define state

C Use the 'mounted' lifecycle hook

D Define a class component

Functional components are defined by exporting a function that returns the render output.

Which of these is NOT true about Vue functional components?

A They improve performance by skipping lifecycle hooks

B They can have internal reactive state

C They receive props as arguments

D They are useful for simple UI pieces

Functional components do not have internal reactive state.

How do you pass props to a functional component in Vue?

A Props cannot be passed to functional components

B Using the 'data' option

C Using the 'methods' option

D As the first argument to the component function

Props are passed as the first argument to the functional component function.

Which Vue feature is NOT available in functional components?

A Render functions

B Props

C Lifecycle hooks

D Passing slots

Functional components do not have lifecycle hooks.

Explain what a functional component is in Vue and when you might use it.

Think about components that just show data without changing it.

Describe how to create a functional component in Vue 3.

Focus on the function and what it returns.