关于 vue 的 transiton 组件和 render 以及 es6 的 class 语法的问题

Question

要基于 vue 实现一个 collapse 的过渡动画，大部分内容来自element-ui。
当我使用 class 语法写的时候，动画的钩子函数完全没有执行
但当我使用 prototype 的形式的时候却没有这个问题
请高手指教，代码如下：
class 形式的构造函数为 Transition1 ，prototype 形式的构造函数为 Transition2

class Transition1?{
  beforeEnter(el)?{
??}  
  enter(el)?{
??}
  afterEnter(el)?{
??}
  beforeLeave(el)?{
??}
  leave(el)?{
??}
  afterLeave(el)?{
??}
}

function Transition2()?{}
Transition2.prototype.beforeEnter?=?function beforeEnter(el)?{}
Transition2.prototype.enter?=?function enter(el)?{}
Transition2.prototype.afterEnter?=?function afterEnter(el)?{}
Transition2.prototype.beforeLeave?=?function beforeLeave(el)?{}
Transition2.prototype.leave?=?function leave(el)?{}
Transition2.prototype.afterLeave?=?function afterLeave(el)?{}

export default?{
  functional:?true,
  render(h,?{?children?})?{
    const data?=?{
      on:?new Transition1()
????}
    return h('transition',?data,?children)
  }
}

为了方便阅读，这些钩子函数的具体内容我省略掉了
实在令人疑惑，class 应该只是个语法糖啊，为什么会有不一样的表现

Answer 1

等待大神解答