函数式组件仅能通过简单函数方式创建，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

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

image.png