在Vue2.X中，函数式组件有两个主要应用场景：作为性能优化，因为它们的初始化速度比有状态组件快得多；返回多个根节点。

然而在Vue3.X中，有状态组件的性能已经提高到可以忽略不计的程度。此外，有状态组件现在还包括返回多个根节点的能力。

因此，函数式组件剩下的唯一应用场景就是简单组件，比如创建动态标题的组件。否则，建议你像平常一样使用有状态组件。

2.x语法：

使用<dynamic-heading>组件，负责提供适当的标题，例如H1，H2

，H3等等，在2.X中，这可能是作为单个文件组件编写的：

// Vue 2 函数式组件示例
export default {
  functional: true,
  props: ['level'],
  render(h, { props, data, children }) {
    return h(`h${props.level}`, data, children)
  }
}

或者，对于喜欢在单个文件组件中使用<template>的用户：

<!-- Vue 2 函数式组件示例使用 <template> -->
<template functional>
  <component
    :is="`h${props.level}`"
    v-bind="attrs"
    v-on="listeners"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

3.X语法：

通过函数创建组件

现在在Vue3中，所有函数式组件都是普通函数创建的，换句话说，不需要定义{functional: true}组件选项。

它们将接收两个参数：props和context。

context：是一个对象，包含组件attrs，slots和emit property。

此外，现在不是在render函数中隐式提供h，而是全局导入h。

前面提到的组件实例，现在改为:

import { h } from 'vue'

const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}
DynamicHeading.props = ['level']

export default DynamicHeading

单文件组件 SFC

在3.x中，有状态组件和函数式组件之间的性能差异已经大大减少，并且在大多数用例中是微不足道的。因此，在SFC上使用functional的开发人员的迁移路径是删除改attrbute，并将props的所有引用重命名为$props，将attrs重命名为$attrs。

使用之前的实例，下面是现在这个样子：

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>

<script>
export default {
  props: ['level']
}
</script>

主要的区别就在于：

1. functional attribute 在<template>中移除

2.listeners现在作为$attrs的一部分传递，可以将其删除