Methods in functional components

[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:
Currently it's difficult to use the functional template since you lose access to closures where as the render method can reference closed-over functions.

[Kingwl]

why functional component need method?

[privatenumber]

@Kingwl I already explained in the PR body but, when using a render method instead of using a functional template, I can write functions outside of the component and reference them via closure. However, when using a template, I no longer have access to the closure.

I can reference them via $options.methods but seems hacky and would prefer official support in offering a similar API to stateful components.

[Kingwl]

I respect your work, but I think there will be a better solution(maybe)
/ cc: @posva

[posva]

I think that rather than having just methods, it will be useful to be able to inject stuff in the context so it can also be accessed in templates

[privatenumber]

What are you thinking @Kingwl ?

@posva If I've understood your suggestion correctly, that is what this PR is doing; it allows methods to be injected into the context so it can be accessed in the template. I'd like to see more support of functional components so that they can be easier to use and hence more useful; this will be a step towards that.

Here's an issue in vue-loader (it was originally in vue but closed) that might explain the use-case more clearly: vuejs/vue-loader#1291

[yyx990803]

I don't think we should be going further along the route of "making functional components work like normal components in a Vue file", for the following reasons:

• In v3 functional components can and should just be functions
• In v3, stateful components are much faster to initialize, and this should make it less necessary to use functional components just for performance
• v3 stateful components can also return multiple root nodes
• If we want to make functional components fully equivalent to stateful ones in a Vue file, we go down the rabbit hole of supporting components, directives, methods, provide/inject and all other options... which eventually defeats the simplicity of functional components.

I think we should go back and make functional components more about "functions".