vue之函数式组件

ops/2024/9/23 4:49:52/

在 Vue.js 中，functional: true 是用来定义函数式组件的一种方式。函数式组件是专门设计用于表现层的轻量级组件，通常没有状态和实例（即没有 data、methods、computed 等）。它们依赖于传入的 props 来渲染内容，因此效率更高。

主要特性

无状态：函数式组件没有内部状态（即没有 data）。
无生命周期钩子：函数式组件不支持生命周期钩子（如 created、mounted 等）。
高性能：由于没有实例化的开销，函数式组件比普通组件的渲染速度更快。

创建函数式组件

可以通过在组件选项中设置 functional: true 来定义一个函数式组件。以下是具体示例：

使用 `<template>` 语法定义函数式组件

<template functional><div>{{ props.message }}</div>
</template><script>javascript">
export default {functional: true,props: {message: {type: String,required: true,},},
};
</script>

使用 JavaScript 渲染函数定义函数式组件

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` 对象

javascript">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>` 语法

<template functional><button @click="context.listeners.click">{{ props.label }}</button>
</template><script>javascript">
export default {functional: true,props: {label: {type: String,required: true,},},
};
</script>

使用 JavaScript 渲染函数

javascript">export default {functional: true,props: {label: {type: String,required: true,},},render(h, context) {return h('button', {on: context.listeners}, context.props.label);},
};