vue项目开发过程封装组件很常见，functional式封装组件是另外一种实现方式，针对这种方式做一下学习记录
vue提供了一种函数式组件类型，将functional设置为true即可开启，那么开启了会带来什么呢？说白了就是定义一些无响应数据，无生命周期的场景，它内部所有数据都依赖于props传入来实现组件功能。
functional特点：
- 无状态，无响应式数据(没有data)
- 无任何生命周期(created、mounted、updated等)
- 无实例，不能像传统组件通过this去修改或获取属性
- 只依赖props传入数据，只依赖外部数据传递而变化，组件内部不需要关注逻辑和状态更改
- 轻量，渲染开销底，性能高
函数式组件的render函数
render函数提供两个参数createElement和context，createElement主要作用创建virtual dom，context为上下文。
createElement接收3个参数：
- 第一个参数：Dom节点字符串｜Vue组件｜Vue组件函数；
- 第二个参数为可选参数：定义渲染组件的所有属性参数；
- 第三个参数是子级虚拟节点，createElement创建的组件｜普通字符串｜数组｜Dom节点字符串｜Vue组件的函数。
context上下文：
- data、props、slots、children以及parent都可以通过context来访问
functional使用注意点：
-
createElement参数使用注意点：createElement第一个参数如果是组件，则第三个参数不生效，则可省略
-
render函数在on事件中可以监听组件的$emit发出的事件，因此处理一些事件时，可以通过on去接收事件
-
一个函数式组件想要接收prop，组件内不用在props中定义去接收，组件上所有的attribute会自动解析为prop
-
基于模板的函数式组件声明：
<template functional></template> -
Vue组件中的render函数和组件中的template不能共存，render函数的优先级低于template模版
