# Vue 函数式组件

# 函数式组件

函数式组件是指用一个 Function 来渲染一个 vue 组件，这个组件只接受一些 prop，我们可以将这类组件标记为 functional，这意味着它无状态 (没有响应式数据)，也没有实例 (没有this上下文)。函数式组件是一个不渲染任何html文本的组件。

一个函数式组件大概向下面这样：

export default {
  functional: true,
  props: {
    // Props 是可选的
  },
  // 为了弥补缺少的实例, 提供第二个参数作为上下文
  render: function (createElement, context) {
    return vNode
  }
}

# render 函数

render 函数的第二个参数 context 用来代替上下文 this 它是一个包含如下字段的对象：

• props：提供所有 prop 的对象

• children: VNode 子节点的数组

• slots: 一个函数，返回了包含所有插槽的对象

• scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。

• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件

• parent：对父组件的引用

• listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。

• injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性;

# 分离表现和行为

函数式组件只处理状态和行为，它们不会做出任何有关设计和布局的决定。

一个函数式组件的使用场景：

假设有一个 a 组件，引入了 a1,a2,a3 三个组件，a 组件的父组件给 a 组件传入了一个 type 属性根据 type 的值 a 组件来决定显示 a1,a2,a3 中的那个组件。这样的场景 a 组件用函数式组件是非常方便的。那么为什么要用函数式组件呢？一句话：渲染开销低，因为函数式组件只是函数。