函数式组件仅能通过简单函数方式创建，funcational选项废弃。
函数式组件变化较大，主要有以下几点：
- 性能在vue3.0的提升，基本可以忽略不记，所以vue3中推荐使用状态组件
- 函数式组件仅能通过纯函数形式声明，接收
props和context俩个参数 - context结构发生了变化
- SFC中
<template>中不能再添加functional特性声明此组件是函数式组件 -
{functional:true}选项被移除
先来回顾一下vue2.0的函数式组件
// 子组件Functional.vue
<script>
export default {
functional: true,
render(h, ctx) {
console.log(ctx);
return h("div", ctx.data, ctx.scopedSlots.content());
},
};
</script>
//父组件
<functional :items="[1, 2, 3, 4, 5, 6, 7, 8]">
<p>默认...</p>
<template v-slot:content>
<p>content...</p>
</template>
</functional>
看一下渲染结果
image.png
看一下子组件中
ctx的输出 ,他是一个FunctionalRenderContext类型的对象
image.png
再来看一下vue3.0的函数式组件
//子组件FunctionalTest.vue
<script >
import { h } from "vue";
function Heading(props, ctx) {
console.log(ctx);
return h(`h${props.label}`, ctx.attrs, ctx.slots.content());
}
export default Heading;
</script>
//父组件
<functional-test label="1">
<p>这是一段文本</p>
<template v-slot:content> ...content </template>
</functional-test>
看一下渲染结果
image.png
看一下子组件中ctx的输出 ,所有的属性都被放到
attrs里面，插槽都被放到slots里面，总之很清晰
image.png
