vue-函数式组件

vue函数式组件特点：

• 组件没有管理任何状态，无data
• 没有监听任何传递给它的状态，只会接收一些传入的props值
• 组件没有实例，无this
• 组件没有生命周期
• 不能通过$emit 对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件

优点就是灵活，轻量，渲染开销低，因为函数式组件只是函数

vue函数式组件应用：

函数式组件需要设置 functional:true，并自定义一个render函数，render函数接收两个参数如下：

• createElement：等于全局的createElement函数，用于创建VNode
• context：一个对象,组件需要的一切都是通过context参数传递
  context属性如下：
• parent：父组件的引用
• props：传入的所有prop的对象
• children：VNode 子节点的数组
• slots：一个函数，包含所有插槽的对象
• scopedSlots：暴露传入的作用域插槽的对象，也以函数形式暴露普通插槽
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• listeners：组件的自定义事件
• injections：如果使用了 inject 选项，则该对象包含了应当被注入的属性

一个按钮组件案例

export default {
  functional: true,   //指定这是一个函数式组件
  render(createElement, { props, listeners, children }) {
    return createElement(
      'button',
      {
        attrs: props,
        on: {
          click: listeners.click
        }
      },
      children
    );
  }
};

函数式组件的适用场景

只需要将外部传入的数据进行展现，不需要有内部状态，不需要在生命周期钩子函数里面做处理，这时候你就可以考虑使用函数式组件。
例如：

• 作为展示组件，例如button组件，静态文本组件，列表的选项
• 用于封装组件，接收一个组件返回一个增加或减少样式效果的封装组件