在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【Vue3非兼容变更——函数式组件】单文件组件 SFC
在3.x中，有状态组件和函数式组件之间的性能差异已经大大减少，并且在大多数用例中是微不足道的 。因此，在SFC上使用functional的开发人员的迁移路径是删除改attrbute，并将props的所有引用重命名为$props，将attrs重命名为$attrs 。
使用之前的实例，下面是现在这个样子：
<template><componentv-bind:is="`h${$props.level}`"v-bind="$attrs"/></template><script>export default {props: ['level']}</script>主要的区别就在于：
1. functional attribute 在<template>中移除
2.listeners现在作为$attrs的一部分传递，可以将其删除
推荐阅读
- 穿衣搭配|美的集团回应“瘦身”传闻：收缩非核心业务，聚焦主业推进战略转型升级
- 南非叶能降尿酸吗,降糖降脂降尿酸
- 南非叶泡水喝能治乙肝吗,薄荷叶泡水喝能减肥吗薄荷泡水喝什么好处
- 孩子五官遗传
- 从 Linux 源码看 Socket 的阻塞和非阻塞
- 越野车|网红高科技钓鱼，“可视锚鱼”并非钓鱼，而是水下猎杀
- 人生最富有哲理最经典的说说?非常经典的哲理说说
- 红烧肉罐头炖土豆
- 时蔬鸡蛋饼的做法
- 音乐|抖音官方出了款音乐App 我帮大家试了试：第一感觉非常干净