vue之函数式组件
在 Vue.js 中，functional: true 是用来定义函数式组件的一种方式。函数式组件是专门设计用于表现层的轻量级组件，通常没有状态和实例（即没有 data、methods、computed 等）。它们依赖于传入的 props 来渲染内容，因此效率更高。
主要特性
- 无状态：函数式组件没有内部状态（即没有
data）。- 无生命周期钩子：函数式组件不支持生命周期钩子（如
created、mounted等）。- 高性能：由于没有实例化的开销，函数式组件比普通组件的渲染速度更快。
创建函数式组件
可以通过在组件选项中设置 functional: true 来定义一个函数式组件。以下是具体示例：
使用
<template functional>
<div>{{ props.message }}div>
template>
<script>
export default {
functional: true,
props: {
message: {
type: String,
required: true,
},
},
};
script>
使用 JavaScript 渲染函数定义函数式组件
export default {
functional: true,
props: {
message: {
type: String,
required: true,
},
},
render(h, context) {
return h('div', context.props.message);
},
};
context 对象
在函数式组件中，你不能使用 this，而是要依赖于一个特殊的 context 对象，它包含了渲染时的上下文信息：
props: 传入的属性。children: 子节点。slots: 插槽内容。data: VNode 数据。parent: 父组件实例。listeners: 事件监听器。scopedSlots: 作用域插槽。
示例：使用 context 对象
export default {
functional: true,
props: {
title: {
type: String,
required: true,
},
},
render(h, context) {
const { props, children } = context;
return h('div', [
h('h1', props.title),
...children
]);
}
};
使用场景
函数式组件非常适合以下场景：
- 纯展示组件：只需要根据输入的
props显示内容，而不需要管理状态。 - 列表项：长列表项的渲染可以显著提升性能。
- 小型可复用组件：一些简单的、无需复杂逻辑的小组件。
优点与注意事项
优点
- 性能优越：由于没有实例化开销，渲染速度更快。
- 简洁明了：代码更简洁，没有冗余的生命周期方法和状态管理。
- 易于测试：函数式组件由于其无状态特性，使得单元测试更加容易。
注意事项
- 无法使用本地状态：因为函数式组件没有内部状态。
- 缺少生命周期钩子：如果需要处理生命周期相关的操作，需要通过父组件来管理。
实际应用示例
假设我们要创建一个简单的按钮组件，该组件接收一个 label 属性并显示它：
使用
<template functional>
<button @click="context.listeners.click">{{ props.label }}button>
template>
<script>
export default {
functional: true,
props: {
label: {
type: String,
required: true,
},
},
};
script>
使用 JavaScript 渲染函数
export default {
functional: true,
props: {
label: {
type: String,
required: true,
},
},
render(h, context) {
return h('button', {
on: context.listeners
}, context.props.label);
},
};
函数式组件提供了一种高效、轻量的方法来创建 Vue 组件，特别是在性能要求较高或仅需简单渲染的场景中。如果你的组件不需要管理状态，不需要生命周期钩子，只是单纯地根据 props 渲染，那么考虑使用函数式组件将是一个不错的选择。