Give functional components their own page in the documentation under "Components In-Depth"

[nabrown]

Currently, all of the information for Vue functional components lives on the "Render Functions & JSX" page. I think they deserve their own dedicated page in the docs for 3 reasons:

• It is not required to build functional components with render functions. You can use template-based single file components with the functional keyword. I think this approach in particular deserves more attention and examples in the docs.
• If I understand correctly, using functional components (especially for small, frequently-repeated components) can improve app performance because Vue doesn't track their state or maintain instances of them. Therefore, it should be learned along with rest of the component information.
• The other usages of functional components -- delegating to other components for example -- could also use more explanation or examples. While this is the more advanced/rarer case, providing an example or two might help people see where they can use such a pattern in their own code.

[chrisvfritz]

You've convinced me. 🙂 As an aside, I'm also considering splitting up the render functions page into several pages, but let's do this first. Do you want to get us started on it, or would you prefer I write the first draft?

[nabrown]

Excellent. I’d love to take a first stab at it. On Jul 30, 2018, 7:12 AM -0400, Chris Fritz notifications@github.com, wrote:

You've convinced me. 🙂 As an aside, I'm also considering splitting up the render functions page into several pages, but let's do this first. Do you want to get us started on it, or would you prefer I write the first draft? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[nabrown]

From what I've learned there are two main categories of functional component. One is the "wrapper" or "higher-order" component. I'm searching for a term for the other type, the simple repeated pieces of UI like headings, buttons, form inputs. Something better than "dumb" components, which is what I've been calling them so far. Is there a term already? Anyone have any ideas?

[leopiccionia]

@nabrown I think "presentational components" is currently preferred instead of "dumb components": https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

And I think this is much clearer, too.

[nabrown]

Hi @chrisvfritz I'm sure you're busy, just wanted to let you know I did a PR for this issue -- the functional components documentation changes. If there's anyone else I can/should pull in to review, let me know. (This would be my first contrib so not sure how process works). Hope you're enjoying summer!

[denisinvader]

It could be great if functional components have their own page in API section because render context is not very documented and at my first usage of FC, I had to guess what can I do and use console log to look at context. Also at the first time, I have not noticed the parent property in render context, but now it exists (maybe I just have not noticed it)

[denisinvader]

I think I can document it if I deep dive into source code of functional components

[nabrown]

I did a ton of reading and learning about functional components in order to write up documentation to be added to the Vue docs. The pull request for that is here: https://github.com/vuejs/vuejs.org/pull/1753

I would love someone to review and comment on the PR, so we can get something added to the docs!

[bodograumann]

It’s great to see functional components get more attention in the docs! What I feel is still missing, is that

1. You can really only use the few component options which are shown. No components, no computed, no watch, etc.. This was not clear to me from the existing documentation. I first had to experience it in my own experiments.

2. Are there any caveats wrt. reactivity when using a functional component?

[vhoyer]

I once had a problem too with the functional components where the parent of the functional component had a style-scoped, but the data-v-hash wasn't being applied to the functional component, even tho I had the v-bind="data.attrs".

Now, I didn't opened a bug repport cause I didn't know if that was intentional behavior or not :man_shrugging:.

If it is intended, maybe we could add this to the docs too, otherwise I'll probably open an issue with the bug :D.