How to implement functional components for stateless components in VUE

This article will explain in detail how to use functional components for stateless components in VUE. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Functional components for stateless components

For some pure presentation components that have no responsive data, no state management, and no lifecycle hook functions, we can set them as functional components to improve rendering performance, because it will be treated as a function, so the overhead is very low.

The principle is that in the patch process, for the virtual DOM generated by the render of functional components, there is no process of recursive subcomponent initialization, so the rendering overhead will be much lower.

It can accept props, but since the instance will not be created, you cannot use this.xx internally to get component properties, as follows

{{value}} export default {props: ['value']} / / or Vue.component (' my-component', {functional: true, / / indicates that the component is a functional component props: {...}, / / optional / / the second parameter is the context There is no this render: function (createElement, context) {/ /...}}) this is the end of the article on "how VUE implements stateless components with functional components". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.