Vue函数实现
Vue 函数式组件的实现
Vue 函数式组件是一种无状态、无实例的组件形式，适用于简单渲染逻辑的场景。其核心特点是性能高效，适合纯展示型需求。
定义方式
export default {
functional: true,
render(createElement, context) {
return createElement('div', context.props.text)
}
}functional: true 标记表明这是函数式组件，render 函数接收 createElement 和上下文对象作为参数。
上下文对象 context 包含以下属性：
- props：接收的 props 数据
- children：子 VNode 数组
- slots(): 返回 slots 对象
- data：传递给组件的全部数据
- parent：父组件实例
带模板的函数式组件
单文件组件中可通过 template 标签实现：
<template functional>
<div>{{ props.message }}</div>
</template>需注意函数式组件模板中只能访问 props 和 listeners，无法使用组件内部状态。
性能优化技巧
函数式组件没有实例化过程，适合以下场景：
- 纯静态内容展示
- 列表项渲染（配合 v-for）
- 高阶组件包装器
典型优化案例：
Vue.component('optimized-item', {
functional: true,
props: ['item'],
render(h, { props }) {
return h('li', props.item.content)
}
})与普通组件对比
| 特性 | 函数式组件 | 普通组件 |
|---|---|---|
| 实例化 | 无 | 有 |
| 生命周期 | 无 | 完整支持 |
| 性能 | 更高 | 标准 |
| 状态管理 | 仅依赖 props | 可维护内部状态 |
注意事项
函数式组件无法使用以下功能：
- 响应式 data
- 计算属性
- 生命周期钩子
- $refs 引用
当需要访问父组件实例时，可通过 context.parent 获取，但会破坏纯函数特性。
