Vue的函数式组件的巨坑

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

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的规范。
因而我修改了组件的名字，关键代码以下：web

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

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