Vue：函数式组件简单介绍（通俗

目录

一、函数式组件是啥？（类比乐高积木）

二、函数式组件的写法（两种）

1. 箭头函数写法（最常见）

2. 完整写法（Vue3 推荐）

三、props 是啥？（类比快递包裹）

四、props 是固定写法吗？

五、函数式组件 vs 普通组件

一、函数式组件是啥？（类比乐高积木）

场景：
你有一堆乐高积木（组件），有些积木很简单（比如一个方块），只负责拼接到其他积木上，不需要自己存储状态（如颜色、大小）。

对应代码：

• 普通组件：像复杂的乐高机器人，有自己的状态（电池电量、动作）。
• 函数式组件：像简单的乐高方块，只负责展示内容，没有自己的状态。

核心特点：

• 无状态：没有 data、methods、mounted 等生命周期。
• 纯渲染：只负责根据输入（props）返回 HTML，类似纯函数。
• 性能高：因为简单，渲染速度更快。

二、函数式组件的写法（两种）

1. 箭头函数写法（最常见）

// 函数式组件（无状态，纯渲染）
export default (props) => {
  return <div>这是一个函数式组件，props内容：{props.message}</div>
}

2. 完整写法（Vue3 推荐）

export default {
  props: ['message'],  // 声明接收的 props
  setup(props) {       // setup 函数是函数式组件的入口
    return () => (
      <div>这是一个函数式组件，props内容：{props.message}</div>
    )
  }
}

三、props 是啥？（类比快递包裹）

场景：
你网购了一个乐高积木（组件），快递包裹上贴了标签（props），写着 “红色方块”、“2x2 尺寸”。组件拿到这些标签后，就能知道自己该长什么样。

对应代码：

• props：就是传递给组件的 “标签”，组件根据这些标签渲染内容。

示例：

<!-- 使用组件时传递 props -->
<MyComponent message="Hello" />

// 组件内部通过 props 接收
export default (props) => {
  return <div>{props.message}</div>  // 显示 "Hello"
}

四、props 是固定写法吗？

不是！ props 只是一个约定俗成的参数名，你可以用其他名字，但不建议：

// 虽然可以用其他名字，但不推荐！
export default (customProps) => {
  return <div>{customProps.message}</div>
}

规范写法：

1. 用 props 作为参数名（约定俗成）。
2. 在组件中声明接收的 props 名称（提高可读性）：

   export default {
     props: ['message', 'count'],  // 声明接收这两个 props
     setup(props) {
       return () => <div>{props.message} {props.count}</div>
     }
   }
   

五、函数式组件 vs 普通组件