在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的一部分傳遞，可以將其刪除