面试题：什么是 Vue 的函数式组件？

Vue 的函数式组件（Functional Component）是一种特殊的组件类型，它没有状态（无 data）、没有实例（无 this），也没有生命周期钩子。函数式组件只接收 props 和 context 作为参数，并返回一个虚拟 DOM 节点。它的主要特点是轻量和高效，适合用于渲染静态内容或纯展示型组件。

1. 函数式组件的特点

无状态：函数式组件没有 data，也没有响应式数据。
无实例：函数式组件没有 this，因此无法访问实例方法或属性。
无生命周期钩子：函数式组件没有 created、mounted 等生命周期钩子。
高性能：由于没有实例化和响应式系统的开销，函数式组件的渲染性能更高。

2. 函数式组件的使用场景

函数式组件适用于以下场景：

纯展示型组件：如按钮、图标、标签等。
高阶组件：用于包装其他组件，增强功能。
性能优化：在需要渲染大量静态内容时，使用函数式组件可以减少性能开销。

3. 函数式组件的定义方式

在 Vue 2 和 Vue 3 中，函数式组件的定义方式有所不同。

3.1 Vue 2 中的函数式组件

在 Vue 2 中，可以通过 functional: true 选项定义函数式组件。

示例：

<template functional>
  <div class="functional-component">
    <p>{{ props.message }}</p>
    <button @click="listeners.click">Click Me</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

3.2 Vue 3 中的函数式组件

在 Vue 3 中，函数式组件可以通过一个普通的函数来定义。

示例：

import { h } from 'vue';

const FunctionalComponent = (props, context) => {
  return h('div', { class: 'functional-component' }, [
    h('p', props.message),
    h('button', { onClick: context.listeners.click }, 'Click Me'),
  ]);
};

export default FunctionalComponent;

4. 函数式组件的参数

函数式组件接收两个参数：

props：组件的属性。
context：包含以下属性的上下文对象：
- attrs：未在 props 中声明的属性。
- slots：插槽内容。
- emit：触发事件的方法（Vue 3）。
- listeners：事件监听器（Vue 2）。

5. 函数式组件与普通组件的对比

特性	函数式组件	普通组件
状态	无状态（无 `data`）	有状态（有 `data`）
实例	无实例（无 `this`）	有实例（有 `this`）
生命周期钩子	无生命周期钩子	有生命周期钩子
性能	更高（无实例化和响应式开销）	较低（有实例化和响应式开销）
适用场景	纯展示型组件、高阶组件	复杂逻辑组件