对函数式组件的认识

# 什么是函数式组件

没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法，它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件

# 怎么创建函数式组件

注册组件

Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function(createElement, context) {
    // ...
  }
})

1
2
3
4
5
6
7
8
9
10
11
12

单文件组件

<template functional>
  ...
</template>

1
2
3

# 为什么使用函数式组件

主要是为了 速度

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

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

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

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

# 参考文章链接

Vue.js函数式组件，什么是函数式组件？为什么要用？什么时候用？ (opens new window)
Vue 函数式组件的使用技巧 (opens new window)

← 相关面试题集合 Vue extend 作用和原理→