Vue函数式组件

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

热门专栏	精彩推荐	图文案例
Openlayers综合(300+）	Cesium (200+)	Leaflet (150+)
MapboxGL (150+)	Canvas (100+)	Echarts (100+)
Openlayers基础(70+)	Geoserver服务	网络配置
HTML 杂货铺	javascript 精选	CSS布局动画
Vue概念详解	vue2 实战	vue3 实战

Vue.js 中的函数式组件（Functional Components）是一种轻量级的组件形式，特别适用于那些无需管理状态、不包含生命周期钩子且仅依赖于传入的属性（props）来渲染的场景。以下是关于Vue函数式组件的详细说明：

一、基本概念

• 无状态（Stateless）与无实例（Instanceless）：函数式组件不维护自己的状态（即没有data对象），也没有自己的实例（因此不能使用this关键字）。这使得它们比常规组件更轻量、更快地渲染。
• 渲染函数：函数式组件通过返回一个虚拟DOM节点（VNode）来定义其渲染逻辑，而不是像普通组件那样使用模板或者选项API中的render函数。
• Props：它们仅接收props作为输入，并且根据这些props来输出UI。这意味着所有的动态内容和行为都应当通过props从外部控制。

二、定义方式

要创建一个函数式组件，你需要在组件的定义中指定functional: true，然后提供一个渲染函数作为组件的属性：

Vue.component('my-functional-component', {
  functional: true,
  props: {
    // 定义接收的props
    message: String
  },
  render: function(createElement, context) {
    // 使用createElement函数和context来构建VNode
    return createElement('div', context.props.message);
  }
});

• createElement是用于创建VNode的函数。
• context对象包含了props、slots、以及一些其它用于渲染的辅助信息。由于没有实例，你不能直接访问this，而是通过context来间接访问props、slots等。

三、特性与限制

• 性能优化：由于没有实例开销和状态管理，函数式组件在渲染上更为高效。
• 不可变性：因为不支持状态变更，函数式组件天然具有不变性，易于理解和测试。
• 局限性：不能使用计算属性、侦听器（watchers）、生命周期钩子函数等。
• Slots与作用域插槽：可以通过context.slots访问默认插槽内容，对于作用域插槽，则需要特殊处理。
• 事件处理：不能直接使用this.$emit，外部事件需通过context.listeners传递并调用。

四、使用场景

• 展示型组件：如列表项、图标、标签等，只需根据props展示静态内容。
• 高性能需求场景：大量复用的简单组件，如在一个列表中渲染大量相同结构的项目。
• 高阶组件：可以用来创建可复用的包装器组件，对传入的组件进行某种变换后输出。

函数式组件是Vue中实现纯粹展示逻辑的一种简洁方式，尤其适合于追求极致性能和简化复杂度的场景。