Support components obj in functional components (fix #7492) (fix #6872)

[privatenumber]

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:
Fixes #7492 #6872 (duplicates)

[y-nk]

👍

[kvedantmahajan]

In which circumstances will you need this functionality? Just curious!

[y-nk]

@kushalmahajan we (the projects i'm involved with) tend to write all components in single vue files with template blocks and avoid render function as much as possible since without JSX it could become quite messy very fast. Here's the typical use-case :

<template functional>
  <div class="you-can-imagine-complex-domtree-here">
    <my-custom-component />
  </div>
</template>

<script>
import MyCustomComponent from 'somehwere-else'

export default {
  components: { MyCustomComponent }
}
</script>

If i'm not mistaken, this would be the only reason for such a thing.

[kvedantmahajan]

@y-nk. I see! Same like the normal components property on non-functional Vue components.

If it helps, then I would like to mention that if you write functional components with render functions, the components property is not required for it to work. I don't know the underlying reason but it's definitely not mandatory there. Plus, I am writing just .js file only so the advantage one gets is full fledged dev tooling, which .vue is still not offering , apart from just doing function without template as a component.

Below is an example of a simple dropdown component I built

import { DropdownWrapper } from "./styles";
import VList from "../list/list";
import VItem from "../item";

const Dropdown = {
  functional: true,
  props: {
    list: Array,
    wrapperStyles: Object
  },
  // eslint-disable-next-line
  render(h, { props, listeners }) {
    const handleClick = listeners.click ? listeners.click : () => {};
    return (
      <DropdownWrapper styles={props.wrapperStyles || {}}>
        <VList
          list={props.list || []}
          renderItem={item => <VItem size="sm">{item}</VItem>}
          onClick={handleClick}
        />
      </DropdownWrapper>
    );
  }
};
export default Dropdown;

[hitautodestruct]

Can this go into 2.6.1? Please?

[rodrigopedra]

This would be very handy, sometimes I separate some components that contains just some svg icons using vue-svg-loader and has no additional logic within them. I wish I could write them as functional.

Writing them with render function is unpractical in larger teams with varied skill levels.

I read in a comment in another PR that in v3 stateful components will be much faster to initialize, and I agree that we should keep functional components minimal and don't add all the options that a stateful component has.

But using other components is great for composition and, in my opinion, would be a great addition and allow for cleaner components.

Also we might not be able to migrate all precious codebases to v3 when it is released, so the faster initialization times and memory gains we could have now with this is much beneficial, in my opinion.

[privatenumber]

Some new info on Evan's vision of functional components: https://github.com/vuejs/rfcs/blob/functional-async-api-change/active-rfcs/0000-functional-async-api-change.md

Still a proposal but based on this, it seems more unlikely this will ever get merged.

[hitautodestruct]

Some new info on Evan's vision of functional components: https://github.com/vuejs/rfcs/blob/functional-async-api-change/active-rfcs/0000-functional-async-api-change.md

Still a proposal but based on this, it seems more unlikely this will ever get merged.

Based on the information in the above link, it's best to avoid future use of the <template functional> option for functional components and focus on purely render functional components if needed.

Even though he states that there will be a graceful degradation of this feature.

[posva]

The v3 the difference between functional and regular components won't be as significant performance wise. So, you can keep writing templates, it may be easier to refractor to functional components now and maybe again in v3