vue3 函数式组件 functional

由于vue3对dom的渲染做了优化，优化了diff算法，在vue2时不管元素是否参与更新，都会被重新创建，vue3则针对不参与更新的元素，打上一个静态标记，此时这个元素只会创建一次，后续的渲染更新则不会重新创建。

于是函数式组件在vue3中性能的提升可以忽略不计，于是functional组件的声明被移除，不在支持：

1. template中不能再写上functional来表示函数式组件
2. vue组件中的{ functional: true }选项也被删除

但是，这也并不意味着无法创建函数式组件了，vue3也有提供创建的方式，但是需要引入h函数。

创建一个js组件：_test.js_

import { h } from 'vue'

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

DynamicHeading.props = ['level']

export default DynamicHeading

我们只能导出一个函数的方式来声明一个函数式组件，并且函数还需要添加一个props属性，用于声明接受的变量。

由于性能没啥提升，可以作为额外的知识了解。