Vue的函数式组件的巨坑

今天在看官网的文档，看到可复用的过渡的时候，官网上说可以用函数式组件代替，如下：

Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})

当时我是自己写的例子，没有复制官网的代码，没想到遇到大坑。
我发现我做的例子的过渡效果没有生效，打开调试工具检查元素，发现居然渲染的是一个functionalfade标签，里面插槽的内容正确，但这个functionalfade很是奇怪，我注册的时候写的是FunctionalFade，而且Vue也支持驼峰写法，到时会自动转成用横杠连接。问题就在这里，functionalfade没有横杠连接。
在不断的查找资料，翻阅文档后，我突然发现，函数式组件只是一个函数，这个应该是关键点，虽然我不太了解这到底是什么，而且官网的函数式组件在注册组件的时候也没有使用驼峰命名法，我想可能函数式组件和组件不是同一个东西，组件中特殊支持的驼峰写法也许不能在函数式组件中用，必须遵循html的规范。
于是我修改了组件的名字，关键代码如下：

new Vue({
	components: {
		'functional-fade': FunctionalFade
	}
})

刷新，发现bug解决。一个下午就这样浪费了。