When to use functional components in Vue.js?

Question

I have just read about functional components in Vue.js 2. (Documentation)

The major benefits of function components seems to be performance improvement:

Since functional components are just functions, they’re much cheaper to render.

It seems like that for emitting events from functional components an event listener has to be added manually. However props are fully accessable.

What is a good rule of thumb when to use a functional component instead of a class component? Should I prefer using the functional components when I implement a stateless component in general? Or are there any other limitations to functional component in Vue.js?

Daniel · Accepted Answer · 2019-10-31 15:32:45Z

3

I was just thinking about this the other day. ..

There are some additional caveats to functional components (e.g. passing classes requires custom handling How to apply classes to Vue.js Functional Component from parent component?)

The rule of thumb I'd use is when the component is when you are using many instances of the component, (so you get a tangible performance benefit) and preferably it's not too complicated in terms of interaction (since you lose most Vue magic)

answered Oct 31, 2019 at 15:32

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

When to use functional components in Vue.js?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related