Vue 函数式组件，如何使用? 为什么要用？什么时候用？

我会带着你远行 2022-10-23 12:53 171阅读 0赞

https://juejin.cn/post/6844903887787278349

# 什么是函数式组件 #

组件**没有管理任何状态**，也**没有监听任何传递给它的状态**，也**没有生命周期方法**时，可以将组件标记为`functional` ，这意味它**无状态** (**没有响应式数据**)，也**没有实例** (**没有 this 上下文**)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

# 如何使用 #

`src\components\render\heading-functional.vue`

`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>

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]

# 为什么要使用函数式组件 #

函数式组件可能会给我们使用组件带来更多的复杂性，但为什么还是需要呢？

## 速度 ##

因为函数式组件没有状态，所以它们不需要像Vue的响应式系统一样需要经过额外的初始化。

函数式组件仍然会对相应的变化做出响应式改变，比如新传入新的 props，但是在组件本身中，它无法知道数据何时发生了更改，因为它不维护自己的状态。

对于那些喜欢看数字说话的人，[该博主][Link 1]做了一个基准测试，渲染1000个列表，有状态组件和函数式组件，有状态组件耗时140ms，函数式组件耗时40ms。

对于大型应用程序，在使用函数式组件之后，你会看到DOM的渲染、更新会有重大改进。

# 什么时候使用函数式组件 #

函数式组件可能不适用于许多情况。毕竟，使用 JavaScript 框架的目的是构建响应式的应用程序。在 Vue 中，如果没有响应式，就无法做到这一点。

然而，有些场景就很适合函数式组件的使用：

*  一个简单的展示组件，也就是所谓的 dumb 组件。例如， buttons, pills, tags, cards，甚至整个页面都是静态文本，比如 About 页面。
 *  “高阶组件”——用于接收一个组件作为参数，返回一个被包装过的组件
 *  v-for 循环中的每项通常都是很好的候选项

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20221023/d7172e3ec41a440392174325fc133d08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/7c9b790c4f4b4e4e9a58b9fd89f05bc0.png
[Link 1]: https://juejin.cn/post/6844903887787278349