Vue 函数式组件

一、说明

可以将函数式组件想象成一个轻量版的组件，与其它组件相比，它只保留了接收和渲染两个功能，因此更像一个函数。

二、特点

  • 不维护状态
  • 没有生命周期方法
  • 没有实例，没有 this
  • 轻量，渲染性能高

三、组件式写法

将 Vue 组件对象的 functional 选项标记为 true，就可以将组件标记为函数式组件。

1
2
3
4
5
6
7
8
9
10
11
<script>
export default {
  functional: true,
  props: {
    ...
  },
  render(createElement, context) {
    ...
  }
})
</script>

四、模板式写法

在 Vue2.5 版本之后，还支持模板式写法。

在这种写法下，只需要编写模板，无需关心 JavaScript，外界传递的内容将可以直接从模板中获取。

1
2
3
<template functional>
  ···
</template>

参考