Vue Function Components

Function Components函数组件只是一个函数，一个无状态组件，没有响应数据，没有this上下文，没有相应的生命周期，它的渲染代价低于实例组件，同时也一定程度上避免了多层组件嵌套的问题。

写法

jsx写法

{
functionnal: true,
render(h, context) {
      return something
}

template写法

<template functional>
some code
</template>

`context`

函数组件的一切都是通过context参数传递的，context对象的介绍


// function components
export default {
functional: true,
name: 'FButton',
render(h, context) {
console.log(context)
return (
  <div>{context.children}</div>
)
},
};

// use f-button <f-button class="f-button" style="color: red" type="primary" v-show="buttonText != 3" @click="add"


![context object](https://user-images.githubusercontent.com/28706090/63660000-0febdf80-c7e7-11e9-8d69-bdaee56badb1.png)

很多时候我们需要将组件上的一些属性和事件透传下去，官网也给出组件写法的模板

Vue.component('my-functional-button', {
  functional: true,
  render: function (createElement, context) {
    // 完全透传任何特性、事件监听器、子节点等。
    return createElement('button', context.data, context.children)
  }
})
// 只透传了HTML属性（class， style没有透传）和事件，directives没有传递
<template>
  <button
    class="btn btn-primary"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot/>
  </button>
</template>

很多时候你需要透传事件，指令，属性我们这时候使用jsx的写法往往更合适，当然我们也可以在单文件组件中使用$attrs和$listeners属性。

什么时候使用

1.程序化地在多个组件中选择一个来代为渲染；

多层v-if和v-else结合使用的场景

2.在将 children、props、data 传递给子组件之前操作它们。

vue-element-admin中的icon-item组件

3.静态的无状态UI组件，性能提升

diveDylan / blog

Vue Function Components #12

写法

`context`

什么时候使用