3-13：介绍一下 Vue3 函数式组件及 使用场景？
函数式组件是自身没有任何状态的组件的另一种形式。它们在渲染过程中不会创建组件实例，并跳过常规的组件生命周期。
我们使用的是一个简单函数，而不是一个选项对象，来创建函数式组件。该函数实际上就是该组件的 render 函数。而因为函数式组件里没有 this 引用，Vue 会把 props 当作第一个参数传入：
const FunctionalComponent = (props, context) => {// ...}
context
包含三个 property：
attrs
、
emit
和
slots
。它们分别相当于实例的
$attrs
、
$emit
和
$slots
这几个 property。
props
和
emits
作为 property 加入，以达到定义它们的目的：
FunctionalComponent.props = ['value']FunctionalComponent.emits = ['click']
如果这个 props 选项没有被定义，那么被传入函数的 props 对象就会像 attrs 一样会包含所有 attribute。除非指定了 props 选项，否则每个 prop 的名字将不会基于驼峰命名法被一般化处理。
h，它将会被当作一个函数式组件来对待。
import { h } from 'vue';const DynamicHeading = (props, context) => {return h(`h${props.level}`, context.attrs, context.slots);}DynamicHeading.props = ['level'];export default DynamicHeading;
业务场景
在 Vue 3 中，常规组件的性能有了很大提升，相比之下，这时的函数式组件在性能上失去了以往的优势。另外，现在的常规组件也支持返回多个根节点了。因此，函数式组件仅剩的唯一用途就是用来实现简单组件了，比如一个动态生成不同标题的组件。