vue功能组件实现
功能组件的基本概念
在Vue中，功能组件（Functional Components）是一种无状态、无实例的组件，仅通过接收props和上下文数据进行渲染。适用于纯展示型逻辑，性能优于常规组件。
创建功能组件
通过functional: true选项定义，或使用单文件组件（SFC）的<template functional>标记：
// 选项式写法
Vue.component('my-functional', {
functional: true,
props: ['items'],
render(createElement, context) {
return createElement('ul', context.props.items.map(item =>
createElement('li', item.text)
));
}
});
// SFC写法
<template functional>
<ul>
<li v-for="item in props.items" :key="item.id">{{ item.text }}</li>
</ul>
</template>上下文参数解析
功能组件的context对象包含以下关键属性：
props: 接收的props数据children: 子节点VNode数组slots(): 返回插槽内容的函数data: 透传的HTML属性、事件等parent: 父组件引用
性能优化场景
- 列表渲染：大量重复元素时，功能组件避免实例化开销。
- 高阶组件：作为包装器传递props而不添加额外状态。
- 静态UI：如按钮组、标签栏等无交互逻辑的部件。
与常规组件对比
| 特性 | 功能组件 | 常规组件 |
|---|---|---|
| 实例化 | 无 | 有 |
| 生命周期 | 不可用 | 可用 |
this上下文 |
无 | 有 |
| 渲染性能 | 更高 | 较低 |
注意事项
- 避免在功能组件中使用
v-model，需手动实现双向绑定逻辑。 - 事件监听需通过
data.on传递，如data.on.click = () => {...}。 - 插槽内容需通过
context.slots().default访问。
通过合理使用功能组件，可显著提升Vue应用的渲染效率，尤其在需要频繁更新的界面部分。
