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

qaq一个懒人
  • 30

要基于 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 应该只是个语法糖啊,为什么会有不一样的表现

回复
阅读 519
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏