Search⌘ K
Home
Courses
Vue - The Road to Enterprise

Functional Components and KeyCode Modifiers

Explore how functional components have changed from Vue 2 to Vue 3 and why using them is now different. Understand the deprecation of Vue 2 keyCode modifiers and learn the recommended way to handle keyboard event modifiers in Vue 3 to optimize your migration and application performance.

We'll cover the following...

Functional components

We can create functional components in both versions of Vue. A functional component is stateless and has neither data nor this context. It only has a render function. Thanks to that, functional components are faster to create and cheaper to render.

Let’s run the following code and look at the functional component example in Vue 2:

Note: The code below may take a while to run. When the server starts, go to the app URL to see the output.

import "./examples/functional-component/functional-component";
Functional component example in Vue 2
  • A new Vue instance is created in the functional-components.js file. This Vue instance renders the FunctionalComponentExample component.
  • The FunctionalComponentExample is a functional component, as the template has the
...