函数式组件

函数式组件是没有实例和状态的纯函数。

Vue 2 写法

export default {
  functional: true,
  render(h, context) {
    return h('div', context.props.content)
  }
}

Vue 3 写法

const FunctionalComp = (props, context) => {
  return h('div', props.content)
}

接收上下文

const FunctionalComp = (props, { attrs, slots, emit }) => {
  return h('div', { ...attrs }, slots.default())
}

单文件组件

<script setup>
const props = defineProps(['content'])
</script>

<template>
  <div>{{ props.content }}</div>
</template>

Vue 3 的 <script setup> 默认接近函数式组件性能。

函数式组件不能拥有响应式状态（data）或生命周期。

性能对比

要点总结

• 函数式组件无实例、无状态
• 适合纯展示组件
• Vue 3 使用普通函数或 <script setup>
• 渲染开销比普通组件低