How to use Vue functional components? Why use them? When is it used?

https://juejin.cn/post/6844903887787278349

What is a functional component

When the component does not manage any state , does not monitor any state passed to it , and does not have a life cycle method , the component can be marked as functional, which means it is stateless ( no reactive data ) and no instance ( no this context ).

how to use

src\components\render\heading-functional.vue

<script>
export default {
    
    
  functional: true, // 函数式组件
  props: ["level", "title"],
  // heading组件
  // <heading :level="1" :title="title" icon="cart">{
    
    {title}}</heading>
  // <h2 title=""></h2>
  render(h, context) {
    
    
    // 子节点数组
    let children = [];
    // 没有this,同样也没有$slot.default
    // 默认插槽，默认子元素的写法有所更改
    children = children.concat(context.children);

    const {
    
     title, level } = context.props;
    return h(
      "h" + level, // 参数1，tagname
      {
    
     attrs: {
    
     title } }, // 参数2：{。。。}
      children // 虚拟子节点VNode不能再使用$slot.default
    );
  },
};
</script>

<style lang="scss" scoped>
</style>

src\view\test\test2.vue

<template>
  <div>
    <h2>函数式组件</h2>
    <heading-functional :level="3" title="函数式组件">
      这是一个函数式组件
    </heading-functional>
  </div>
</template>

<script>
import HeadingFunctional from "../../components/render/heading-functional.vue";
export default {
  components: { HeadingFunctional },
};
</script>

<style lang="scss" scoped>
</style>

effect:

Why use functional components

Functional components may bring more complexity to our use of components, but why is it still necessary?

speed

Because functional components have no state, they do not require additional initialization like Vue's reactive system.

The functional component will still make responsive changes to the corresponding changes, such as newly passing in new props, but in the component itself, it cannot know when the data has changed because it does not maintain its own state.

For those who like to talk about numbers, the blogger did a benchmark test, rendering 1000 lists, stateful and functional components. Stateful components took 140ms and functional components took 40ms.

For large applications, after using functional components, you will see significant improvements in DOM rendering and updates.

When to use functional components

Functional components may not be suitable for many situations. After all, the purpose of using JavaScript frameworks is to build responsive applications. In Vue, this cannot be done without responsiveness.

However, some scenarios are very suitable for the use of functional components:

• A simple display component, the so-called dumb component. For example, buttons, pills, tags, cards, and even the entire page is static text, such as the About page.
• "High-level components"-used to receive a component as a parameter and return a packaged component
• Each item in the v-for loop is usually a good candidate